Convert colors between HEX, RGB, HSL, LCH, and OKLCH formats with ease.
Helping 30,000+ world’s greatest designers create beautiful designs.
Atmos’s toolbox
Atmos is a toolbox specialized for creating UI palettes. From finding colors, through generating shades, to fine-tuning your palette we've got you covered.
A color converter translates a color value from one format into equivalent values in other formats. For example, the HEX code #3b82f6 represents the same color as rgb(59, 130, 246) in RGB, hsl(217, 91%, 60%) in HSL, and oklch(64% 0.2 259) in OKLCH. Converters are essential for web development workflows where colors originate in design tools but need to be expressed in different formats for CSS, design tokens, or documentation.
The Atmos color converter supports HEX, RGB, HSL, LCH, and OKLCH. These cover the full range of formats used in modern web design: HEX and RGB for legacy and broad compatibility, HSL for intuitive hue-based adjustments, and LCH and OKLCH for perceptually uniform palettes. You can convert in any direction between any of these formats.
HEX is a six-digit hexadecimal shorthand for RGB values, widely used in CSS and design tools. RGB defines colors as red, green, and blue channel values from 0 to 255. HSL describes colors by hue (0–360°), saturation, and lightness, making it more intuitive for human adjustments. LCH and OKLCH are perceptually uniform color spaces where equal numerical changes produce equal perceived differences, making them far more reliable for building consistent shade scales and accessible palettes than HSL or RGB.
Different tools and contexts use different formats. Design tools like Figma often output HEX. CSS custom properties may use HSL for easy manipulation. Modern design systems increasingly adopt OKLCH for perceptual consistency. You might also need to convert when handing off to developers, writing design tokens, or integrating colors from a brand guide into a codebase that uses a different format. A converter eliminates manual calculation and reduces the chance of error.
For modern projects, OKLCH is the recommended format. It is perceptually uniform, natively supported in CSS, and makes it easy to build consistent shade scales with predictable lightness and contrast. HSL is a good intermediate choice if OKLCH feels unfamiliar, it is human-readable and easy to adjust manually. HEX and RGB remain practical for legacy codebases and broad tool compatibility. Avoid defining your full palette in HEX or RGB alone, as they offer no intuitive control over perceptual brightness.