Color Format Converter
Color
Pick a color with the native color picker or paste a HEX value, and instantly see it in every common CSS format — HEX, modern space-separated RGB, legacy comma RGB, HSL, HSV, OKLCH (the perceptually-uniform color space modern CSS prefers), and a ready-to-paste CSS custom property. Each value has its own copy button.
- HEX
#3B82F6 - RGB
rgb(59 130 246) - RGB (legacy)
rgb(59, 130, 246) - HSL
hsl(217 91% 60%) - HSV
hsv(217, 76%, 96%) - OKLCH
oklch(62.3% 0.188 259.8) - CSS var
--color: #3B82F6;
How to use
- Use the color picker or paste a HEX value (3 or 6 digits, # optional).
- Every format updates instantly.
- Copy the format you need with the button on the right of each row.
Frequently asked questions
- What is OKLCH?
- OKLCH is a perceptually-uniform color space — equal numeric distances feel like equal visual distances. Modern CSS supports it natively and design tools like Figma 2024+ are adopting it for smoother gradients and consistent contrast.
- Why two RGB rows?
- Modern CSS uses space-separated 'rgb(59 130 246)'. Legacy CSS and older browsers expect comma-separated 'rgb(59, 130, 246)'. Both produce the same color.
- What about alpha (RGBA / HSLA)?
- This tool focuses on opaque colors. For transparency, append '/ 0.5' inside the modern syntax (e.g. 'rgb(59 130 246 / 0.5)') or use the legacy 'rgba(…, 0.5)' form.
- Is HSV the same as HSB?
- Yes — HSV (Value) and HSB (Brightness) are two names for the exact same color model. CSS doesn't accept hsv() directly; use HSL for stylesheets.
Related tools
Color Palette from Image
Drop an image and the tool extracts a dominant-color palette via Canvas — copy HEX or grab the whole set.
Color Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.