{ sniptools }
Design

Color Converter

Convert colors between HEX, RGB, HSL, and more

HEX #2DD4BF
RGB rgb(45, 212, 191)
HSL hsl(172, 66%, 50%)

What is Color?

Color formats are standardized systems for describing colors numerically so that machines and software can reproduce them consistently. In web development, you encounter multiple formats because they were designed for different purposes: HEX evolved from hardware constraints of early displays, RGB maps directly to how screens emit light through red, green, and blue subpixels, and HSL was created to align more closely with how humans actually think about color — in terms of hue, saturation, and lightness.

The challenge arises when working across tools and codebases. A designer might hand you a HEX value from Figma, your CSS uses HSL for theme variables, your Tailwind config references named utility classes, and a new CSS specification promotes OKLCH for perceptual uniformity. Converting between these formats by hand is tedious and error-prone, especially when you need to account for alpha channels, gamut boundaries, or accessibility contrast requirements.

A color converter bridges these worlds by accepting any input format and instantly producing equivalent representations in every other format. It eliminates the mental math of converting between bases, coordinate systems, and color spaces, letting you focus on design decisions rather than arithmetic.

How it works

Under the hood, every color format encodes the same physical stimulus — a specific combination of wavelengths — using different mathematical models. HEX and RGB are both representations of the additive color model: HEX is simply RGB values written in base-16. Converting between them is straightforward arithmetic — each pair of hex digits maps to a decimal value between 0 and 255 for the red, green, and blue channels respectively.

HSL conversion involves mapping the RGB cube onto a cylinder. The hue is derived from which RGB channel dominates and by how much, saturation measures how far the color is from a neutral gray, and lightness is the midpoint of the maximum and minimum channel values. The formulas are well-defined but involve conditional branches and modular arithmetic that make manual conversion impractical.

OKLCH is a more recent color space based on the Oklab perceptual model. Unlike HSL, where two colors with the same "lightness" value can appear drastically different in perceived brightness, OKLCH ensures that equal numeric steps produce visually equal changes. The conversion from RGB to OKLCH passes through a linear-light RGB intermediate, then through a 3x3 matrix transform into the Lab space, and finally converts Cartesian (a, b) coordinates into polar (chroma, hue) form.

How to use this tool

  1. Enter a color value in any supported format into the input field — you can type a HEX code like #3b82f6, an RGB value like rgb(59, 130, 246), an HSL value like hsl(217, 91%, 60%), or an OKLCH value.
  2. Alternatively, use the visual color picker to select a color by clicking or dragging on the gradient area and hue slider.
  3. All other format representations update instantly as you type or pick, so you can copy whichever format you need for your CSS, design tool, or configuration file.
  4. To check accessibility, enter both a foreground and background color to see the WCAG contrast ratio and whether the combination passes AA or AAA standards for normal and large text.
  5. Use the Tailwind CSS output to find the closest named utility class for your color, or confirm that an arbitrary value is needed.

Examples

Converting a Figma HEX color to CSS HSL variables

Your designer provides the brand primary color as #3b82f6. Paste it into the converter to get hsl(217, 91%, 60%), which you can use in CSS custom properties like --color-primary: 217 91% 60% for easy theme manipulation.

Checking button text contrast for WCAG compliance

You have a blue button (#2563eb) with white text (#ffffff). Enter both colors to see the contrast ratio is 4.63:1, which passes WCAG AA for normal text but falls short of AAA. You can then adjust the blue darker until it hits 7:1 if enhanced contrast is required.

Migrating from HSL to OKLCH for a design system

Your theme uses HSL values, but you want to adopt OKLCH for more perceptually uniform color scales. Paste each HSL value to get its OKLCH equivalent, ensuring your new palette steps look evenly spaced to the human eye rather than just numerically even.

Finding the nearest Tailwind class for a client brand color

A client specifies their brand color as rgb(220, 38, 38). Paste it in and discover it maps exactly to Tailwind red-600, so you can use bg-red-600 and text-red-600 throughout your project without custom configuration.

About this tool

Pick or paste any color and instantly convert between HEX, RGB, HSL, OKLCH, and Tailwind class names. Includes a visual color picker and contrast ratio checker.

Common use cases

  • • Converting HEX colors from design mockups to RGB or HSL for use in CSS
  • • Finding the closest Tailwind CSS utility class for a specific brand color
  • • Checking contrast ratios between text and background colors for WCAG accessibility compliance
  • • Converting between modern color formats like OKLCH and legacy formats like HEX and RGB

Frequently asked questions

What color formats does this tool support?
The converter supports HEX (#rrggbb), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%)), OKLCH (oklch(L C H)), and Tailwind CSS class names. You can input a color in any format and see all other representations instantly.
What is OKLCH and why should I use it?
OKLCH is a perceptually uniform color space that makes it easier to create consistent color palettes. Unlike HSL, equal steps in lightness actually look equal to the human eye, making it ideal for design systems and theme generation.
How does the contrast ratio checker work?
It calculates the WCAG 2.1 contrast ratio between two colors. A ratio of at least 4.5:1 is required for normal text (AA), and 7:1 for enhanced contrast (AAA). This helps ensure your designs are accessible to users with visual impairments.
Can I use OKLCH colors in all browsers?
OKLCH is supported in all modern browsers (Chrome 111+, Firefox 113+, Safari 15.4+). For older browser support, use this tool to convert OKLCH values to HEX or RGB fallbacks. CSS can use the @supports rule to provide both modern and legacy values.
How do I find the Tailwind class for a specific brand color?
Paste your brand color in any format (HEX, RGB, etc.) and the tool will show the closest matching Tailwind CSS utility class. If there is no exact match, it shows the nearest Tailwind color with the delta distance so you can decide whether it is close enough or if you should use an arbitrary value like bg-[#1a2b3c].
What is the difference between HEX, RGB, and HSL?
HEX is a compact hexadecimal notation (#ff5733) widely used in CSS and design tools. RGB specifies red, green, and blue channel values from 0-255. HSL describes colors by hue (angle on the color wheel), saturation (vibrancy), and lightness, which many designers find more intuitive for creating color variations.