Skip to content

Color Picker & Converter (HEX, RGB, HSL, HSV, CMYK)

Pick any color and convert it between HEX, RGB, HSL, HSV and CMYK. Grab colors from your screen, adjust hue, saturation, lightness and opacity, and copy CSS-ready values.

#4F46E5
Type or paste any CSS color: HEX, RGB, HSL, HSV or a color name.
Adjust

Color codes

Readability

Aa Text on white: —
Aa Text on black: —

4.5:1 is the WCAG AA minimum for body text. Check any pair in the contrast checker, build a scale in tints & shades or a palette in the palette generator.

How to use the color picker

  1. Choose a color with the color well, type or paste a value into the text field, or click Pick from screen (Chrome and Edge) to sample any pixel on your display.
  2. Fine-tune it with the Hue, Saturation, Lightness and Opacity sliders.
  3. Copy the format you need: HEX, HEX with alpha, RGB, HSL, HSV/HSB, CMYK or a ready-made CSS custom property.

The text field accepts almost anything CSS understands: #4F46E5, #4f4, rgb(79 70 229), rgba(79, 70, 229, .5), hsl(243 75% 59%), hsv(243, 69%, 90%) and named colors such as tomato or rebeccapurple. The color is saved in the page address, so you can bookmark or share it.

Which color format should I use?

  • HEX (#RRGGBB) is the most common format in CSS and design tools. Add two more digits for transparency: #RRGGBBAA.
  • RGB describes the red, green and blue channels from 0 to 255. Use rgb() with a fourth value when you need opacity.
  • HSL (hue, saturation, lightness) is the easiest to edit by hand: change only the lightness to get a lighter or darker version of the same color.
  • HSV / HSB is the model most color pickers in design apps use. It is not a CSS format, but it helps when you copy values from Figma or Photoshop.
  • CMYK is for print. The values here are a quick, device-independent conversion; for professional printing use the ICC profile of your print shop.

Is the color readable?

The readability boxes show the contrast ratio of your color as text on white and on black. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text and icons. For a full check against your own background, open the contrast checker.

Privacy

All conversions happen in your browser with plain JavaScript. No color you pick is sent to a server.

More color tools

Color Palette Generator for Websites
Generate harmonious five-color palettes from a base color using analogous, monochromatic, complementary, split, triadic and tetradic rules. Lock colors, share a link and export to CSS, SCSS, Tailwind or JSON.
Tints & Shades Generator (50–950 Color Scale)
Turn one color into a Tailwind-style 50–950 color scale or into tints and shades in 5, 10 or 20% steps. Click to copy HEX values and export CSS variables, Tailwind theme, SCSS or JSON.
Color Contrast Checker (WCAG AA & AAA)
Check the contrast ratio between text and background colors against WCAG 2 AA and AAA for normal text, large text and UI components, with a live preview and one-click suggestions for passing colors.
CSS Color Names: All 148 Named Colors with HEX Codes
All 148 CSS named colors with HEX, RGB and HSL values. Search by name or HEX code, filter by color family, sort by hue or lightness and copy any value with one click.
Color Families: Color Codes by Color Group
Browse colors by family: reds, oranges, yellows, greens, cyans, blues, purples, pinks, browns, grays, whites and blacks, with HEX codes and ready-made color combinations.
Popular Colors: Tailwind CSS and Bootstrap 5 Palettes
The complete Tailwind CSS v3 color palette (22 colors, 50–950) and Bootstrap 5.3 color scales (100–900) with HEX codes. Click any shade to copy it.
Web Safe Colors: The 216-Color Palette
The 216 web-safe colors with HEX codes, grouped by red value, plus a tool that finds the nearest web-safe color for any color.