🔄 One toolkit,
every design task

Color Converter

Convert between HEX, RGB, HSL, CMYK, and OKLCH with instant bidirectional conversion.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

🔄 Color Converter

Color Converter Guide

Color codes come in many formats: HEX, RGB, HSL, CMYK, and more. Our converter instantly translates between all major color formats, helping you work across different design tools and platforms.

Enter a HEX color code in the input field. The converter automatically displays the RGB, HSL, and CMYK equivalents. Use the preview box to see the color.

Pro Tips

Frequently Asked Questions

Q: What is the difference between HEX and RGB?
What is the difference between HEX and RGB? HEX is a 6-digit hexadecimal representation, while RGB uses decimal values 0-255 for each channel.
Q: Why convert between color formats?
Why convert between color formats? Different tools use different formats. CSS accepts HEX, HSL, and RGB. Photoshop uses RGB or CMYK.
Q: What is the difference between HSL and OKLCH?
What is the difference between HSL and OKLCH? HSL uses cylindrical coordinates (hue, saturation, lightness). OKLCH is a perceptually uniform color space, meaning equal numeric changes produce equal visual changes. OKLCH is more modern and accurate.
Q: Why does my CMYK value look different on screen?
Why does my CMYK value look different on screen? CMYK is for print and uses ink mixing. RGB/HSL is for screens and uses light. The conversion is approximate because screen colors (additive) differ from print colors (subtractive).
Q: Can I batch convert multiple colors at once?
Can I batch convert multiple colors at once? Currently the tool converts one color at a time. For batch processing, copy the conversion logic into a spreadsheet or script using the same formulas.

CSS Named Colors & Color Psychology

The web has 148 named colors built into CSS, from Coral to Goldenrod. Beyond the code, color psychology shapes how users feel about interfaces — warm tones energize, cool tones calm, and neutrals build trust. This palette mixes CSS classics with the psychology behind them.

Coral #FF7F50

Warm and friendly — popular for CTAs in lifestyle brands

Tomato #FF6347

Energetic red-orange, great for urgent accents

Goldenrod #DAA520

Earthy gold associated with quality and heritage

Teal #008080

Balanced blue-green — calm, trustworthy, professional

Indigo #4B0082

Deep violet tied to wisdom and premium brands

Crimson #DC143C

Bold red for passion, alerts, and strong emphasis

SlateBlue #6A5ACD

Soft purple-blue common in SaaS dashboards

ForestGreen #228B22

Nature and growth — the color of eco and finance brands

HotPink #FF69B4

Playful and bold, the signature of youth-oriented design

Navy #000080

Authority and stability — the suit-and-tie of colors

Q: What are CSS named colors?
What are CSS named colors? CSS defines 148 named colors like Coral and Goldenrod that work in any stylesheet without hex codes. They are great for prototyping but designers usually switch to hex or HSL for precise brand colors.
Q: How does color psychology affect design?
How does color psychology affect design? Warm colors (red, orange, yellow) create energy and urgency; cool colors (blue, green, teal) create calm and trust. CTAs often use warm tones while financial and health brands prefer blues and greens.