Paste any colour value, HEX, RGB, HSL or OKLCH, and instantly see it in every other format. Useful when bridging design tools and CSS.
Intuitive, friction-free workflow designed to get you from blank slate to job-ready in minutes.
Paste a value in any supported format.
Read the conversions for every other format.
Copy what you need.
Engineered for speed, privacy, and recruiter compliance
Targeted for modern job applications and career moves
Round-trips between formats are lossless for in-gamut colours. We warn when an OKLCH value falls outside the sRGB gamut so you don't get surprised on display.
Zero paid tiers, hidden subscriptions, or paywalls
No forced email signups or credit meters
Parsed inside your browser, never stored in DB
No watermark branding or export limits
Authoritative standards for passing ATS filters and catching hiring managers' attention.
Designers receive brand guidelines in HEX. JavaScript canvas APIs want RGB. CSS developers increasingly prefer HSL for theme variables because adjusting --primary-light is one line. A converter eliminates manual lookup tables.
When pasting from Photoshop or Figma, watch for alpha channels. RGBA and HSLA include opacity. Standard HEX is six digits without transparency, eight digits with alpha on some platforms.
Straightforward answers regarding ATS compliance, PDF rendering, and data privacy.
Some OKLCH values are outside the sRGB gamut. We clamp them to the nearest displayable sRGB colour and flag a warning so you know it happened.
No. HEX and 8-bit RGB are the same data in different notation, the round-trip is exact.
HSL is convenient but not perceptually uniform, two colours with the same L can look very different in brightness. OKLCH fixes this, which is why modern design systems are switching to it.
Not in this tool. The Color Picker keeps a history of recent colours, which is the closest workflow today.
Paste a HEX code (long #3b82f6 or shorthand #39f) and the converter returns the equivalent rgb() value instantly, along with HSL. It's the quickest way to move a color from a design file into CSS.
Enter an rgb() or rgba() value and the tool outputs the matching HEX and HSL codes side by side. You can also paste an hsl() value to convert the other direction, everything updates as you type.
In-depth articles and tutorials to get the most out of Color Converter.
Build accessible, consistent color systems in CSS. Understand why OKLCH fixes HSL brightness distortions and enables wide-gamut Display P3 web palettes.
Design compliant, high-readability web interfaces. Learn WCAG 2.2 contrast thresholds, the mathematical formula behind relative luminance, and the APCA standard.
Build production-ready light and dark themes without JavaScript overhead. Learn how to structure design tokens with HSL, avoid contrast failures, and implement smooth mode transitions.
Design interfaces everyone can read. Master WCAG 2.1 contrast ratios, understand human luminance perception, and learn how to construct balanced 60-30-10 palettes using HEX, RGB, and HSL.