Color ConverterHEX, RGB, HSL, and contrast
en

AppHelp

Convert colors and check contrast locally

Paste a HEX, RGB, or HSL value to get equivalent formats and quick contrast references.

HEX
#0EA5E9
RGB
rgb(14, 165, 233)
HSL
hsl(199, 89%, 48%)
Contrast on white
2.77:1
Contrast on black
7.58:1

Quick answer

HEX, RGB, and HSL describe the same color in different formats. This converter accepts HEX, rgb(), or hsl() input, returns equivalent values, previews the color, and shows contrast ratios against white and black backgrounds.

How to use

  1. 1. Paste a color valueUse a short or long HEX value, an rgb(r, g, b) value, or an hsl(h, s%, l%) value.
  2. 2. Compare equivalent formatsRead the converted HEX, RGB, and HSL outputs to use the same color across CSS, design specs, code snippets, and documentation.
  3. 3. Check quick contrastUse the white and black contrast ratios as a fast readability signal before choosing foreground or background text colors.

Examples

HEX to RGB and HSL

Input
#2563eb
Output
rgb(37, 99, 235)
hsl(221, 83%, 53%)

RGB to HEX

Input
rgb(15, 23, 42)
Output
#0f172a

HSL to HEX

Input
hsl(160, 84%, 39%)
Output
#10b981

Common use cases

  • Convert design-system tokens between CSS formats
  • Translate values from design tools into frontend code
  • Check quick readability for text on light or dark backgrounds
  • Normalize color examples for docs, issue reports, and screenshots

Edge cases

  • Short HEX values such as #0f8 are expanded before conversion
  • Alpha channels are not included in this converter's output
  • Contrast ratios depend on foreground and background pairing, not the color alone
  • HSL rounding can produce small one-unit differences when converting back to RGB

Features

  • Convert between HEX, RGB, and HSL color formats
  • Live color preview swatch
  • WCAG contrast ratios on white and black backgrounds
  • Runs entirely offline in the browser

Related tools

Color Palette GeneratorGenerate coordinated color palettes from a base color.CSS Clamp GeneratorBuild responsive CSS values for polished UI typography and spacing.Social Image GeneratorCreate visual assets after choosing brand colors.SVG to PNGExport SVG assets that use converted CSS colors.

Frequently asked questions

Which color formats are supported?
HEX (#rrggbb or #rgb), RGB (rgb(r, g, b)), and HSL (hsl(h, s%, l%)). The converter switches between them in real time.
Does it show accessibility contrast?
Yes. WCAG contrast ratios against white and black backgrounds appear next to each color so you can check readability.
Is the color converter free?
Yes — free and browser-local. Nothing is uploaded and no signup is required.