🎨 Color Converter
Pick any color and get it in every format instantly
About Color Formats
🔢 HEX
Hexadecimal color codes used in web development. Format: #RRGGBB where each pair is 00-FF.
Example: #FF5733 = Red 255, Green 87, Blue 51
🌈 RGB
Red, Green, Blue values from 0-255. The additive color model used by screens.
Example: rgb(255, 87, 51)
🎨 HSL
Hue (0-360°), Saturation (0-100%), Lightness (0-100%). More intuitive for designers.
Example: hsl(14, 100%, 60%)
💡 HSV/HSB
Hue, Saturation, Value/Brightness. Common in design software like Photoshop and Figma.
Example: hsv(14°, 80%, 100%)
🖨️ CMYK
Cyan, Magenta, Yellow, Key (Black). Subtractive model used in print.
Example: cmyk(0%, 66%, 80%, 0%)
💡 Quick Tips
- Use HEX/RGB for web development
- Use HSL to easily adjust brightness/saturation
- Use CMYK only for print design
- Click any related color swatch to use it
Privacy & Limitations
- All calculations run entirely in your browser -- nothing is sent to any server.
- Results are computed locally and should be verified for critical applications.
Related Tools
- JWT Decoder -- Decode JWT tokens and display header and payload
- Simple Regex Tester -- Test a regex pattern against sample text
- Base64URL Encoder/Decoder -- Encode and decode Base64URL (URL-safe Base64 variant)
- Cookie Size Budget Calculator -- Analyze cookie bytes, per-cookie limits, and request header budget usage
Related Tools
View all toolsBig-O Notation Visualizer
Interactive plot of O(1) through O(n!) complexity curves with operation count comparison
JSON Formatter
Format and beautify JSON with proper indentation
JSON Validator
Validate JSON syntax and show errors
CSV to JSON Converter
Convert CSV data to JSON format with auto-detection
JSON to CSV Converter
Convert JSON arrays to CSV format with nested object handling
JWT Decoder
Decode JWT tokens and display header and payload
Color Converter FAQ
How do I convert HEX to RGB?
To convert HEX to RGB, convert each pair of hexadecimal digits to decimal. For example, #FF5733 becomes RGB(255, 87, 51) because FF=255, 57=87, and 33=51. This converter does it instantly—just enter the HEX code.
What is the difference between HEX and RGB?
HEX and RGB represent the same colors using different notation. HEX uses hexadecimal (#RRGGBB), while RGB uses decimal values (0-255). They're interchangeable—#FF0000 equals rgb(255, 0, 0). HEX is more compact; RGB is more intuitive for calculations.
What is HSL and when should I use it?
HSL stands for Hue, Saturation, Lightness. It's more intuitive than RGB for adjusting colors—to darken a color, just reduce lightness. Use HSL when you need to create color variations (shades, tints) or programmatically adjust brightness and saturation.
What is the difference between HSL and HSV?
HSL and HSV both use hue and saturation, but measure brightness differently. HSL's lightness goes from black (0%) through pure color (50%) to white (100%). HSV's value goes from black (0%) to brightest color (100%), not white. HSV is used in Photoshop and Figma; HSL is used in CSS.
Why do my printed colors look different from my screen?
Screens use RGB (additive light), while printers use CMYK (subtractive ink). These color models have different gamuts—some screen colors can't be printed exactly, and vice versa. Always convert to CMYK and do test prints for color-critical work.
What is CMYK used for?
CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model used in professional printing. Unlike RGB which emits light, CMYK inks absorb light wavelengths. Use CMYK when preparing designs for print to avoid unexpected color shifts.
How do I find a complementary color?
In HSL or HSV, add 180° to the hue. For example, the complementary color of hsl(60, 100%, 50%) (yellow, hue 60°) is hsl(240, 100%, 50%) (blue, hue 240°). This converter shows complementary and other color harmonies automatically.
What are analogous colors?
Analogous colors are adjacent on the color wheel, typically within 30° of each other in hue. For example, orange (30°), yellow-orange (45°), and yellow (60°) are analogous. They create harmonious, low-contrast color schemes.
What is color saturation?
Saturation is the intensity or purity of a color. 100% saturation is a vivid, pure color. 0% saturation is completely gray (no color). Reducing saturation creates muted, pastel-like tones. Both HSL and HSV include saturation as a component.
Can I use CMYK values in CSS?
No, CSS does not support CMYK. Browsers only understand RGB-based formats (HEX, RGB, HSL). Convert CMYK to RGB or HEX before using colors in web development. CMYK is exclusively for print workflows.
What is a HEX color code?
A HEX color code is a 6-character hexadecimal representation of RGB values, preceded by #. Each pair represents red, green, and blue intensity from 00 to FF (0-255 decimal). For example, #00FF00 is pure green (R=0, G=255, B=0).
How do I make a color lighter or darker?
The easiest way is using HSL. To lighten, increase the L (lightness) value toward 100%. To darken, decrease it toward 0%. In RGB, you'd need to proportionally adjust all three channels, which is less intuitive.