Color Converter & Palette Generator

Convert colors between HEX, RGB, HSL & CMYK, generate palettes and check contrast.

{{ line }}
Complementary
{{ col }}
Analogous
{{ col }}
Triadic
{{ col }}
Split-Complementary
{{ col }}
Sample Text White Text
Contrast Ratio: {{ whiteContrast }}:1
WCAG AA Normal Text: {{ whiteContrastVal >= 4.5 ? __t('pass') : __t('fail') }} | WCAG AA Large Text: {{ whiteContrastVal >= 3 ? __t('pass') : __t('fail') }}
WCAG AAA Normal Text: {{ whiteContrastVal >= 7 ? __t('pass') : __t('fail') }} | WCAG AAA Large Text: {{ whiteContrastVal >= 4.5 ? __t('pass') : __t('fail') }}
Sample Text Black Text
Contrast Ratio: {{ blackContrast }}:1
WCAG AA Normal Text: {{ blackContrastVal >= 4.5 ? __t('pass') : __t('fail') }} | WCAG AA Large Text: {{ blackContrastVal >= 3 ? __t('pass') : __t('fail') }}
WCAG AAA Normal Text: {{ blackContrastVal >= 7 ? __t('pass') : __t('fail') }} | WCAG AAA Large Text: {{ blackContrastVal >= 4.5 ? __t('pass') : __t('fail') }}

What Is a Color Converter?

A Color Converter enables instant conversion of color values between different color spaces like HEX, RGB, HSL and CMYK. Web designers and developers use different color formats depending on context — HEX for CSS, RGB for image editing, HSL for intuitive color adjustment and CMYK for print.

Color Spaces Explained: HEX, RGB, HSL, CMYK

HEX is a 6-digit hexadecimal value (#RRGGBB) commonly used in CSS. RGB defines colors via Red, Green and Blue values (0–255). HSL describes colors via Hue (0–360°), Saturation and Lightness — ideal for intuitive color adjustments. CMYK (Cyan, Magenta, Yellow, Key/Black) is used for print.

Color Theory & Harmonies

Color harmonies are based on the position of colors on the color wheel. Complementary colors are opposite (180°) and create maximum contrast. Analogous colors are adjacent (±30°) and feel harmonious. Triadic colors are evenly spaced (120°) and offer vibrant combinations. Split-complementary colors use the two neighbors of the complement for a softer contrast.

Understanding color spaces: sRGB, HSL, LAB, and P3

RGB is additive and device-near: three values (0–255) describe how much red, green, and blue a pixel emits on an sRGB display. CSS Color Module Level 4 standardizes sRGB as the default color space for classic values like #0d9488 and rgb(13 148 136). Important: RGB values are gamma-encoded, not linear. For mixing or luminance calculations they must be converted back to linear light using v <= 0.03928 ? v/12.92 : ((v+0.055)/1.055)^2.4 — the exact step used in WCAG contrast.

HSL (hue, saturation, lightness) is a reorientation of RGB for human intuition: hue 0–360° describes the color on the wheel, saturation the chroma, lightness the perceived brightness between black (0%) and white (100%). HSL is perfect for tints/shades — a secondary color is often born as hsl(185 93% 50%), a darker variant by simple lightness reduction. But anyone generating accent colors via hue shifts should know HSL is not perceptually uniform: 60° yellow looks much brighter than 240° blue at the same lightness.

LAB and the newer OKLCH were created to guarantee perceptual equality: a distance of 10 units in LAB space corresponds to a similar perceived difference no matter where you are in color space. CSS Color Module 4 today allows lab(54% -36 -9) and oklch(0.7 0.15 200) natively in the browser. Display-P3 extends the gamut by about 25% versus sRGB — Apple devices have used it since 2016, modern Android phones increasingly so. Designers should provide both values: color: #0d9488; color: color(display-p3 0.05 0.58 0.53); as progressive enhancement.

How to use the color converter in your workflow

The converter is more than hex-to-RGB — it gives you the full color identity you need for a design system.

  1. Start with your brand hex value. The tool immediately shows RGB, HSL, and CMYK — the latter matters if your design also feeds a print workflow (business cards, flyers).
  2. Use color: hsl(...) in your CSS instead of hex when you plan to generate hover states: filter: brightness(0.9) or an HSL variant hsl(185 93% 28%) makes tonal variants reproducible.
  3. Use the complementary / triadic palettes as a starting point — but pull the tones into your own system. Pure complementary contrasts feel aggressive; shift lightness until things harmonize.
  4. Click a swatch to copy the hex to clipboard. It is the fastest bridge between a design conversation and the code editor.
  5. Check the contrast block: you immediately see whether the color passes WCAG AA against white or black for body text. Skip the separate contrast checker for the first iterations.

Concrete conversion examples

These examples show how the notations translate into each other.

  • CalcSI teal: #0d9488 = rgb(13, 148, 136) = hsl(173, 84%, 32%) = cmyk(91%, 0%, 8%, 42%).
  • Pure red: #ff0000 = rgb(255, 0, 0) = hsl(0, 100%, 50%) — easier to derive in HSL (hue 0 = red).
  • Material indigo 500: #3f51b5 = rgb(63, 81, 181) = hsl(231, 48%, 48%). Saturation 48% reveals it is not a full hue but tonal.
  • Modern CSS: color: oklch(0.7 0.15 200); yields a perceptually light cyan that looks richer on Display-P3 devices than its sRGB conversion.
  • Print: a subtle brand grey #3c4858 becomes cmyk(32%, 19%, 0%, 65%) in CMYK — heavy on black, low on chroma, perfect for clean print output.

Limits of automatic color conversions

The mathematical conversion hex -> RGB -> HSL -> CMYK is exact, but it says nothing about perceived effect. Wide-gamut displays (P3) show the same hex more saturated than budget laptop panels because more gamut is available. CMYK is only an approximation: the actual print output depends on the printer's ICC profile, the paper (coated vs. uncoated), and the ink transfer behavior — never rely on the tool's CMYK values for production print data. CSS filter effects (e.g. backdrop-filter: blur() or mix-blend-mode) also shift perceived color heavily. Finally: color blindness, sunlight, and display calibration cannot be captured numerically — always test your palette in real context, ideally on at least three devices and once with color profile disabled.

Frequently asked color conversion questions

Hex or HSL — which should I use in CSS?
Hex is shorter and widespread in design tools. HSL is better for calculations and theme variants because lightness can be tweaked easily. In modern CSS both are equal; store HSL as a CSS variable when you need dark mode or color accent variations.
Why do CMYK values differ between tools?
There is no unambiguous reverse of RGB to CMYK without an ICC profile. Photoshop typically uses US Web Coated SWOP v2; our tool uses a generic standard formula. For the print shop always export from Photoshop/Illustrator with the correct profile.
What is the difference between #abc and #aabbcc?
The shorthand #abc is equivalent to #aabbcc — each character is doubled. Advantage: shorter. Drawback: only 4096 colors representable (vs. 16,777,216). For precise brand colors always use the 6-digit form.
How do I encode transparency in a hex value?
Use 8-digit hex: #0d9488cc means 80% alpha. All modern browsers support this. Alternatively rgba(13 148 136 / 0.8) or the modern syntax rgb(13 148 136 / 80%).
When should I use OKLCH instead of HSL?
OKLCH is perceptually uniform — a palette with equal lightness really feels equally bright. Use it for design-token scales (50/100/200 ... 900) when consistent perception matters more than browser compatibility. Fallback for legacy browsers via @supports.
Why do I see different colors on my iPhone?
iPhones use Display-P3, many PC monitors only sRGB. The system maps hex values, which can look richer. For branding, provide P3 fallbacks (color: color(display-p3 ...)) and compare mockups on real devices — never on a single monitor.

Related tools