Enter any colour code

How to Use the Color Code Converter

Enter a color value — paste any color in HEX (#FF5733), RGB (255,87,51), HSL (11,100%,60%), or color name (tomato).
Select input format — choose which format your input is in.
Read all formats — the converter shows the same color in HEX, RGB, RGBA, HSL, HSLA, HSV, and CSS color name (if applicable).
Adjust opacity — enter an alpha value (0-1) to get RGBA and HSLA values with transparency.
Copy any format — use the format required by your target environment (CSS, design tool, image editor).

🎨 Format by use case: CSS/HTML: HEX or rgb(). Design tools (Figma, Sketch): HEX or HSL. Image editors (Photoshop): HSB/HSV or RGB 0-255. Android development: #AARRGGBB (alpha first). iOS/Swift: UIColor with RGB 0-1 values. Python Pillow: RGB tuple (255,87,51). Each platform has its preferred format.

Understanding Color Formats

🔵 HEX (#RRGGBB)

6 hexadecimal digits: 2 each for red, green, blue. Each pair ranges 00-FF (0-255 decimal). Shorthand: #RGB when both digits match (#FF5500 = #F50). Most common format in web development. Does not support transparency — use 8-digit HEX (#RRGGBBAA) for alpha in modern CSS.

🔴 RGB / RGBA

rgb(red, green, blue) where each channel is 0-255. rgba() adds alpha: rgba(255,87,51,0.5) = 50% transparent. Alternative: RGB as percentages rgb(100%,34%,20%). RGBA is the most explicit format for understanding color channels and is widely supported in all browsers and design tools.

🌈 HSL / HSLA

Hue (0-360°), Saturation (0-100%), Lightness (0-100%). Most intuitive for designers: hue is the color wheel position, saturation controls color intensity, lightness controls brightness. Easier to reason about than RGB: 'make it 20% lighter' = increase L by 20. hsla() adds alpha transparency.

🔶 HSV / HSB

Hue, Saturation, Value (also called Brightness). Similar to HSL but different lightness model. At 100% Value/100% Saturation: pure vivid color. At 0% Value: black. At 0% Saturation: greyscale. Photoshop and most image editors use HSB. Not a native CSS format but important for understanding Photoshop color picker behavior.

🖥️ Platform Color Formats

CSS: #hex, rgb(), hsl(), oklch(). Android: #AARRGGBB (XML) or Color.rgb(r,g,b) (Kotlin). iOS Swift: UIColor(red:0.9,green:0.2,blue:0.1,alpha:1.0). Flutter: Color(0xFFFF5733). React Native: same as CSS. Unity: new Color(1f,0.34f,0.2f). Each platform requires the color in its own format.

🆕 Modern CSS Colors

CSS Color Level 4 introduces: oklch() — perceptually uniform, works for HDR displays. color() — access wide gamut display-p3 and other color spaces. color-mix() — mix two colors. light-dark() — automatic dark mode. These modern functions are increasingly important for advanced CSS color work on wide-gamut displays.

Color Conversion in Design and Development

Design-to-development handoff

Design tools (Figma, Sketch, Adobe XD) export colors in HEX or RGB. CSS needs HEX or rgb(). Android needs ARGB hex. iOS needs float RGB. React Native accepts CSS-style colors. The design-to-development handoff often requires converting the designer's color specification to the format required by the target platform. This converter eliminates the mental arithmetic of manual conversion and reduces the risk of transcription errors that cause subtle color mismatches between design and implementation.

Color systems and design tokens

Production applications use color tokens rather than raw values: --color-primary: #7fff6f. When a brand color changes, one token update propagates everywhere. Color tokens exist at multiple levels: primitive (--green-400: #7fff6f), semantic (--color-success: var(--green-400)), and component (--button-background: var(--color-success)). This three-level system enables global theme changes, dark mode, and brand variations with minimal code changes.

Color in data visualisation

Data visualisation libraries (D3.js, Chart.js, Plotly) have their own color format requirements and built-in palettes. D3 accepts any CSS color string. Sequential palettes (light-to-dark) show quantity. Diverging palettes (two-hue) show positive/negative deviation. Categorical palettes (distinct hues) differentiate categories. Colourblind-safe palettes (avoiding red/green combinations) ensure accessibility. The Viridis, Plasma, and ColorBrewer palettes are designed specifically for data visualisation accessibility.

🎨 Color conversion formula reference: HEX to RGB: convert each 2-digit hex pair to decimal. RGB to HEX: convert each 0-255 value to 2-digit hex. RGB to HSL: complex formula (use this tool). HSL to RGB: complex formula (use this tool). HSL to HSV: L and S values differ between models — requires formula. For all complex conversions, this tool is faster and more accurate than manual calculation.

Frequently Asked Questions

What is HEX colour format?

HEX colours use hexadecimal (base-16) notation: #RRGGBB. Each pair represents a red, green, or blue value from 00 (0) to FF (255). #000000 = black, #ffffff = white, #ff0000 = red. HEX is the most common format for web design.

What is the difference between RGB and HSL?

RGB defines colour by red, green, and blue light values (0–255 each). HSL defines colour by Hue (0–360° on the colour wheel), Saturation (0–100%), and Lightness (0–100%). HSL is more intuitive for design — to make a colour lighter, just increase Lightness.

What is CMYK?

CMYK (Cyan, Magenta, Yellow, Key/Black) is used in print design. Unlike RGB (additive light mixing), CMYK is subtractive — inks absorb light. Digital screens use RGB; when designing for print, colours need to be converted to CMYK to ensure accurate reproduction.