Color & Contrast
Convert Hex, RGB, HSL, and CMYK values and check WCAG contrast.
Color pair
Enter either Hex, RGB, HSL, or CMYK. Both colors stay in this browser tab.
Examples: #267A3E · rgb(38, 122, 62) · hsl(137, 53%, 31%)
Opaque colors only; alpha requires a known composited result.
Foreground conversions
#F2F5F2rgb(242, 245, 242)hsl(120, 13%, 95.5%)cmyk(1.2%, 0%, 1.2%, 3.9%)Background conversions
#0C0E0Drgb(12, 14, 13)hsl(150, 7.7%, 5.1%)cmyk(14.3%, 0%, 7.1%, 94.5%)Live preview
Readable by calculation.
Color is visual. The pass and fail labels below make the result available without relying on color alone.
Contrast ratio
17.63:1
Calculated using WCAG 2.x relative luminance. Results use the unrounded ratio.
AA normal text
4.5:1 minimum
AA large text
3:1 minimum
AAA normal text
7:1 minimum
AAA large text
4.5:1 minimum
UI components
3:1 minimum
Large text means at least 18 pt regular or 14 pt bold. The UI-component result applies when this pair defines a meaningful visual boundary or state.
Working notes
Use Color & Contrast with the boundary visible.
Color & Contrast converts common color notations and calculates the WCAG contrast ratio between a foreground and background pair.
What is Color & Contrast?
Color notation varies across tools and contexts: designers hand over hex codes (#79C58D), CSS authors use RGB or HSL, and print workflows use CMYK. A color converter translates between these representations so you can move values between design tools, code, and documentation without manual calculation. Beyond conversion, contrast ratio is critical for accessibility. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background colors: 4.5:1 for normal text and 3:1 for large text at the AA level, or 7:1 and 4.5:1 at the stricter AAA level. Failing these thresholds means some users literally cannot read the text. This tool calculates the WCAG 2.x relative luminance contrast ratio instantly, showing the pass/fail result for both AA and AAA at normal and large text sizes. It also provides the OKLCH representation, a perceptually uniform color space that is becoming the preferred way to define colors in modern CSS because equal numeric steps produce equal perceived changes in lightness and chroma.
When to use it
- Design-to-code handoff — convert Figma hex values to the HSL or OKLCH format your CSS uses.
- Accessibility auditing — check whether your text and background colors meet WCAG AA or AAA contrast requirements.
- Theme development — convert a brand color to HSL, adjust the lightness for dark mode, and convert back to hex.
- Print preparation — get an approximate CMYK breakdown of an RGB screen color before sending assets to a printer.
- Documentation — include both hex and RGB values in a style guide so developers and designers use the same color.
How to use it
- 01Enter a color in any supported format: hex (#79C58D), RGB (121, 197, 141), HSL (136, 39%, 62%), or CMYK.
- 02Review the equivalent values in all other formats. Copy any representation.
- 03For contrast checking, set a foreground and background color.
- 04Read the contrast ratio and pass/fail results for WCAG AA and AAA at normal and large text sizes.
Common mistakes
- Ignoring alpha transparency in contrast checks — WCAG contrast requires fully opaque colors. If your text or background has transparency, calculate the composited color before checking contrast.
- Adjusting lightness in RGB — RGB is not perceptually uniform. Increasing all channels equally does not produce a perceptually lighter color. Use HSL lightness or OKLCH for predictable adjustments.
- Trusting CMYK for print — screen-to-CMYK conversion is an approximation. Accurate print color requires ICC profiles specific to the paper and printer. Use the CMYK value as a starting point, not a proof.
- Checking contrast with design tool eyedroppers — anti-aliased text blends foreground and background pixels. Check contrast against the actual background color, not a pixel sample from rendered text.
- Meeting AA but ignoring AAA — AA (4.5:1) is the minimum. Aim for AAA (7:1) when possible, especially for body text that users read for extended periods.
Synthetic example
Convert an accent color
Input
#79C58D
Result
rgb(121, 197, 141) hsl(136, 39%, 62%)
Color format comparison
| Feature | Hex | RGB | HSL | OKLCH | CMYK |
|---|---|---|---|---|---|
| Use case | Web, design tools | CSS, code | CSS, theme tuning | Modern CSS | |
| Perceptually uniform | No | No | Partially | Yes | No |
| Alpha support | #RRGGBBAA | rgba() | hsla() | oklch(L C H / a) | No |
| Human-readable | Moderate | Low | High | High | Low |
| Browser support | Universal | Universal | Universal | Modern | N/A (print) |
Related standards
Limits and data boundary
- CMYK conversion is an approximate screen-color conversion, not a printer profile proof.
- A passing ratio does not replace review of font size, weight, states, and forced-colors behavior.
Frequently asked questions
- What is WCAG contrast ratio?
- WCAG contrast ratio measures the luminance difference between two colors. A ratio of at least 4.5:1 is required for normal text and 3:1 for large text to meet WCAG AA.
- Does this tool support alpha transparency?
- Color conversion supports opaque Hex, RGB, HSL, and CMYK values. Alpha-channel colors are not accepted because contrast requires fully opaque foreground and background.
- Is CMYK conversion accurate for print?
- The CMYK conversion is a mathematical approximation for screen use. Accurate print reproduction requires ICC color profiles and proofing against the target printer.
- What is OKLCH and why should I use it?
- OKLCH is a perceptually uniform color space where equal numeric steps produce equal perceived changes. It makes theme generation, palette creation, and lightness adjustments more predictable than HSL.
- What is the difference between WCAG AA and AAA?
- AA requires 4.5:1 contrast for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. AAA is harder to meet but provides better readability.
Keep working