Color converter, WCAG contrast lab, palette builder and CSS token generator
Convert HEX, RGB, HSL, HSV and CMYK values, preview readable text, check WCAG contrast, build tints, shades and color harmonies, create CSS custom properties, save palettes locally and copy a practical color report for design systems or frontend reviews.
Accepted inputs: #0f766e, 0f766e, rgb(15 118 110), rgb(15,118,110), hsl(176 77% 26%) and hsl(176,77%,26%). Contrast is calculated with WCAG relative luminance.
A color converter should help you decide, not only translate values
Design and frontend work often moves between HEX, RGB and HSL values, but conversion alone rarely answers the real question: will this color be readable, reusable and consistent in a production interface? A useful color converter should expose the exact CSS values, show contrast results, generate nearby shades and explain whether the palette can survive buttons, cards, links, alerts, charts and dark mode.
This color converter is built for that practical workflow. It accepts common CSS color formats, calculates HEX, RGB, HSL, HSV and CMYK, checks text contrast against a background, suggests readable black or white text, builds tints and shades, creates complementary and analogous options, stores palettes in your browser and outputs CSS custom properties that can be pasted into a real stylesheet or design system note.
How to read the contrast result
WCAG contrast compares the relative luminance of two colors. Normal body text generally needs at least 4.5:1 for AA and 7:1 for AAA. Large text can pass AA at 3:1, but that should not be used as an excuse for pale labels, thin navigation text or low-contrast buttons. Always test the final component size, weight and background, not just an isolated brand color.
- AA normal text usually needs 4.5:1 or better.
- AA large text usually needs 3:1 or better.
- AAA normal text needs 7:1 or better.
- Focus states should be visible without relying only on hue.
- Token names should describe usage, not just appearance.
Common color debugging examples
If a brand color fails on white, try darkening the color, using it as a background with white text, or reserving it for borders and icons. If every shade feels too similar, adjust lightness before saturation. If a palette feels flat, add neutral support colors and reserve intense hues for actions or alerts. For charts, avoid encoding meaning with color alone; pair color with labels, shape or order.
Common questions
Is HEX more accurate than RGB or HSL?
No. They are different ways to describe the same sRGB color. HSL is often easier for adjusting lightness, while HEX and RGB are common in CSS and design tokens.
Does a contrast ratio guarantee good design?
No. It is a minimum readability check. Font size, weight, spacing, hover states and surrounding colors still matter.
Are generated palettes production ready?
They are strong starting points. Review them in real components before naming them as final design tokens.
How do I convert a HEX color to RGB?
Split the six hex digits into three pairs and convert each pair from base 16 to decimal. The tool does this instantly and also outputs HSL and the alpha value.
What is the difference between HSL and RGB?
RGB mixes red, green and blue light. HSL describes hue, saturation and lightness, which is more intuitive when you want to lighten, darken or shift a color.
What does the alpha channel control?
Opacity, from 0 (fully transparent) to 1 (fully opaque), written as the fourth value in rgba() or as an extra two hex digits in an 8-digit hex color.
