CSS · Typography

CSS Color Converter

High-precision conversion utility between HEX, RGB, HSL, HSV, and CMYK formats with accessibility simulations.

728x90

#F5C842Active Swatch

HEX Input Format

🎨

Closest CSS Named Color

SandybrownApproximate

RGB Sliders

Red245

Green200

Blue66

HSL

Hue45°

Saturation91%

Lightness61%

HSV

Hue45°

Saturation73%

Value96%

CMYK Output

Print Ready (U.S. Web Coated)

Cyan 0%

Magenta 18%

Yellow 73%

Black (Key) 4%

Bulk Processor

Gradient Generator

background: linear-gradient(90deg, #F5C842 0%, #FF6B35 100%);

Accessibility Simulation

Protanopia

#E2E162

Deuteranopia

#E4E86A

Tritanopia

#F37C82

VS WHITE

1.6:1

Fail AA

VS BLACK

12.4:1

Pass AA

Colors Library

aliceblue

#F0F8FF

antiquewhite

#FAEBD7

aqua

#00FFFF

aquamarine

#7FFFD4

azure

#F0FFFF

beige

#F5F5DC

bisque

#FFE4C4

black

#000000

blanchedalmond

#FFEBCD

blue

#0000FF

blueviolet

#8A2BE2

brown

#A52A2A

burlywood

#DEB887

cadetblue

#5F9EA0

chartreuse

#7FFF00

chocolate

#D2691E

coral

#FF7F50

cornflowerblue

#6495ED

cornsilk

#FFF8DC

crimson

#DC143C

cyan

#00FFFF

darkblue

#00008B

darkcyan

#008B8B

darkgoldenrod

#B8860B

darkgray

#A9A9A9

darkgreen

#006400

darkgrey

#A9A9A9

darkkhaki

#BDB76B

darkmagenta

#8B008B

darkolivegreen

#556B2F

darkorange

#FF8C00

darkorchid

#9932CC

darkred

#8B0000

darksalmon

#E9967A

darkseagreen

#8FBC8F

darkslateblue

#483D8B

darkslategray

#2F4F4F

darkslategrey

#2F4F4F

darkturquoise

#00CED1

darkviolet

#9400D3

deeppink

#FF1493

deepskyblue

#00BFFF

dimgray

#696969

dimgrey

#696969

dodgerblue

#1E90FF

firebrick

#B22222

floralwhite

#FFFAF0

forestgreen

#228B22

fuchsia

#FF00FF

gainsboro

#DCDCDC

How It Works

Select Color

Type a CSS string, drag RGB sliders, or pick from our library.

Instant Conversion

Hex, RGB, HSL, HSV, and CMYK formats update in real-time.

Accessibility Audits

Check simulated color blindness and contrast ratios instantly.

Ultimate Guide to CSS Color Formats

Modern web engineering relies on multiple **color models** depending on technical requirements:

* **HEX & RGB**: The native pixel-level models used by hardware displays. HEX uses base-16 strings while RGB defines channels between 0 and 255.

* **HSL & HSV**: Human-intuitive cylindrical coordinate models. HSL stands for Hue, Saturation, and Lightness, making adjustments to lighting much simpler.

* **CMYK**: The primary subtractive color model used in printing pipelines. Having accurate conversions is vital when translating digital interfaces to print guidelines.

Pro Tip:

Simulating Deuteranopia and Protanopia (red-green blindness) during layout design stages ensures complete accessibility compliance!

Technical FAQ

What CSS string formats can the converter parse?

The tool natively parses HEX (#FFFFFF, #FFF), RGB/RGBA (rgb(255,0,0)), HSL/HSLA (hsl(120, 100%, 50%)), and all standard CSS named colors (gold, red, aliceblue).

What color blindness simulations are available?

We simulate Protanopia (red-blind), Deuteranopia (green-blind), and Tritanopia (blue-blind) using precise industrial conversion matrices.

Is contrast checking compliant with WCAG?

Yes. Our contract checkers compute precise relative luminance ratios on standard WCAG 2.1 formulas, showing direct PASS/FAIL parameters for AA text ratings.

728x90

One Color, Every Syntax CSS Accepts

Conversion map

All of these are the same pixel — conversion is bookkeeping, not approximation:

From → To	Watch for
HEX → RGB	Lossless; 3-digit hex expands (#abc = #aabbcc)
RGB → HSL	Lossless round trip; tiny rounding in display
Anything → with alpha	HEX gains 2 digits (#7c3aedcc); rgba/hsla take 0–1
HSL → HEX	What you tweak in HSL ships as HEX
Named colors → values	rebeccapurple is real; 'light blue' is not

Why you convert at all

Designers hand off HEX; you think in HSL when adjusting; canvas and JS APIs want RGB numbers; alpha variants need the 8-digit or functional forms. The practical loop: receive #7c3aed, convert to HSL to derive hover (darken lightness 8%) and disabled (drop saturation) states, convert back to HEX for the stylesheet. Doing this by eye instead produces the slightly-off color families every codebase accumulates.

Neighbors in the color workflow

Sample any on-screen color with the screen color picker, explore around a hue in the color picker, let the random color generator break a creative block, and put every text/background pair through the contrast checker before it ships.