🏠 Home🧮 Calculators✍️ Text Tools
✓ Copied!
🎨 Developer Tool

Color Code Converter

Convert color codes between HEX, RGB, HSL, CMYK and CSS formats. Color picker, harmony generator and recent colors — all instant.

Click to pick
HEX color code
🎨 Slate Blue
RGB sliders
R
G
B
🎨 Color harmonies

Color format guide

Different applications use different color formats. Web browsers use HEX and RGB, image editors use CMYK, and CSS3 introduced HSL for easier manipulation. This converter handles all of them instantly.

#HEX format

6-digit hexadecimal. #RRGGBB where each pair is 00-FF. Example: #3B82F6 = Blue. Used in HTML, CSS, SVG and design tools. 3-digit shorthand: #RGB (e.g. #F00 = red).

RGB format

Three values 0-255 for Red, Green, Blue. rgb(59, 130, 246). Also rgba(R,G,B,A) where A is opacity 0-1. Used in CSS, Photoshop, Figma and most design software.

HSL format

Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Most intuitive for design — change lightness to darken/lighten without changing the hue. hsl(221, 83%, 53%) = the same blue.

CMYK format

Cyan, Magenta, Yellow, Key (Black) — each 0-100%. Used in print design and professional printing. CMYK and RGB have different color gamuts — some RGB colors can't be reproduced in print.

Frequently asked questions

Take the 6-character hex code (without #). Split into 3 pairs: first pair = R, second = G, third = B. Convert each from hexadecimal to decimal. Example: #1E40AF → 1E=30, 40=64, AF=175 → rgb(30, 64, 175). Hex digits: 0-9 and A=10, B=11, C=12, D=13, E=14, F=15.
A complementary color is directly opposite on the color wheel (180° away in HSL hue). Complementary pairs create maximum contrast and visual pop. Example: Blue (#0000FF) and Yellow (#FFFF00) are complementary. Use them for call-to-action buttons against background colors.
Screens emit light (additive color = RGB), while print reflects light (subtractive color = CMYK). They have different gamuts — RGB can show more vibrant colors than CMYK can print. Always do a test print before finalizing colors for printed materials, as the on-screen preview may differ.
🔗 Related tools
🔗URL EncoderEncode/decode URLs 🔐Base64 EncoderEncode/decode Base64 ✨Fancy TextStylish Unicode text