Skip to main content

    Color Converter

    Convert colours between HEX, RGB, and HSL formats instantly. Pick, edit, and copy.

    Free to use. Runs in your browser.

    Enter a colour value in HEX, RGB, HSL, or CMYK to see equivalent values in all other formats. Supports alpha channels and displays a live preview swatch.

    Colour Formats: When to Use What

    Every colour on your screen can be described in multiple formats. HEX (#FF5733) is the web standard, compact and universally recognised. RGB (255, 87, 51) is intuitive because it maps directly to how screens work: red, green, and blue light mixed at different intensities. HSL (14, 100%, 60%) describes colour the way humans think about it: hue (the colour wheel position), saturation (how vivid), and lightness (how bright or dark).

    Different situations call for different formats. Designers usually think in HSL because adjusting lightness or saturation is intuitive, just change one number and the colour gets lighter, darker, more vivid, or more muted. Developers often work in HEX because it's what Figma and design tools export. Backend systems and APIs sometimes use RGB integers or hex strings.

    This converter lets you enter any format and instantly see all others. Edit one value and everything updates in real time. All conversions happen in your browser, no data is sent anywhere.

    Colour Format Comparison

    FormatExampleRangeBest For
    HEX#FF5733#000000 to #FFFFFFCSS, design tools, compact notation
    RGBrgb(255, 87, 51)0 to 255 per channelProgrammatic colour manipulation
    HSLhsl(14, 100%, 60%)H: 0 to 360, S/L: 0 to 100%Intuitive colour adjustments, design systems
    RGBArgba(255, 87, 51, 0.8)RGB + alpha 0 to 1Semi-transparent colours, overlays
    HSLAhsla(14, 100%, 60%, 0.8)HSL + alpha 0 to 1Transparent colours with HSL control
    HEX8#FF5733CC#00000000 to #FFFFFFFFHEX with alpha (80% = CC)
    OKLCHoklch(65% 0.2 25)L: 0 to 100%, C: 0 to 0.4, H: 0 to 360Modern CSS, perceptually uniform

    What this means for you: Use HEX for static colours in CSS. Use HSL when you need to create colour variations (just change lightness for hover states). Use RGBA/HSLA when you need transparency. For new design systems, consider OKLCH, it's becoming the recommended format because equal numerical changes produce visually equal colour changes.

    Brand Colour Reference

    Need the exact colour code for a brand? Search below. All values are from official brand guidelines as of 2025-2026.

    BrandHEXRGB
    Google Blue#4285F466, 133, 244
    Google Red#EA4335234, 67, 53
    Google Yellow#FBBC04251, 188, 4
    Google Green#34A85352, 168, 83
    Facebook Blue#1877F224, 119, 242
    Instagram Gradient Start#F58529245, 133, 41
    Instagram Gradient End#DD2A7B221, 42, 123
    Twitter/X Black#0000000, 0, 0
    LinkedIn Blue#0A66C210, 102, 194
    YouTube Red#FF0000255, 0, 0
    TikTok Pink#FE2C55254, 44, 85
    Spotify Green#1DB95429, 185, 84
    Netflix Red#E50914229, 9, 20
    Slack Purple#4A154B74, 21, 75
    Slack Green#2EB67D46, 182, 125
    WhatsApp Green#25D36637, 211, 102
    Discord Blurple#5865F288, 101, 242
    Stripe Purple#635BFF99, 91, 255
    Shopify Green#96BF48150, 191, 72
    Amazon Orange#FF9900255, 153, 0
    Airbnb Rausch#FF5A5F255, 90, 95
    Uber Black#0000000, 0, 0
    Dropbox Blue#0061FF0, 97, 255
    Microsoft Blue#00A4EF0, 164, 239
    Apple Black#0000000, 0, 0
    PayPal Blue#0030870, 48, 135
    Reddit Orange#FF4500255, 69, 0
    Pinterest Red#E60023230, 0, 35
    Figma Purple#A259FF162, 89, 255
    Tailwind Blue#38BDF856, 189, 248

    Showing 30 of 30 brand colours.

    WCAG Colour Contrast Guide

    Accessibility isn't optional, 1 in 12 men and 1 in 200 women are colour blind. WCAG requires a minimum 4.5:1 contrast ratio for normal text and 3:1 for large text (18px+ or 14px bold). Here's how common colour combinations score:

    CombinationRatioLevel
    AaBlack on White21:1AAA
    AaWhite on Black21:1AAA
    AaDark grey on White12.6:1AAA
    AaGrey on White4.5:1AA
    AaWhite on LinkedIn Blue4.6:1AA
    AaWhite on Facebook Blue3.5:1AA Large
    AaWhite on Red4:1AA Large
    AaWhite on Google Green3.1:1Fail
    AaBlack on Yellow14.9:1AAA
    AaWhite on Netflix Red4.5:1AA

    Key takeaway: White text on bright colours often fails. Green, orange, and light blue backgrounds need dark text instead. When in doubt, use black or very dark grey (#333) on light backgrounds.

    Creating Colour Scales with HSL

    This is the single most useful colour technique for web developers. Pick one hue, keep saturation constant, and vary lightness to create a complete colour scale. That's how Tailwind, Material Design, and every modern design system works.

    LightnessHSL ValueUse CaseExample (Blue, H=217, S=89%)
    97%hsl(217, 89%, 97%)Background tint
    90%hsl(217, 89%, 90%)Subtle borders, dividers
    70%hsl(217, 89%, 70%)Disabled / muted states
    61%hsl(217, 89%, 61%)Primary colour (Google Blue)
    50%hsl(217, 89%, 50%)Hover state
    40%hsl(217, 89%, 40%)Active / pressed state
    25%hsl(217, 89%, 25%)Dark mode accent, headings
    15%hsl(217, 89%, 15%)Dark mode background

    Pro tip: Convert your brand's primary colour to HSL, note the hue and saturation, then generate the scale by adjusting lightness. You instantly have background tints, hover states, and dark mode variants, all harmonious, zero guesswork.

    Modern CSS Colour Functions

    CSS has moved beyond just HEX and RGB. Newer colour spaces offer wider gamuts and more intuitive manipulation:

    FunctionExampleWhy It Matters
    oklch()oklch(70% 0.15 150)Perceptually uniform, equal lightness changes look equal to human eyes
    oklab()oklab(70% -0.1 0.1)Best for colour mixing and smooth interpolation between colours
    color()color(display-p3 1 0 0)Access wider gamut colours on modern displays (more vivid reds and greens)
    color-mix()color-mix(in oklch, red 50%, blue)Mix colours directly in CSS, no preprocessor or JavaScript needed
    light-dark()light-dark(#333, #eee)Automatic dark mode colours without media queries
    relative colourhsl(from var(--primary) h s calc(l + 20%))Derive colours from existing ones, perfect for hover/active states

    oklch() is becoming the recommended default for design systems because changing lightness or chroma by the same amount across different hues produces visually consistent results, something HSL can't guarantee (yellow looks much lighter than blue at the same HSL lightness value).

    Worked Example: Building a Colour System from a Brand Colour

    The situation: A client gives you their brand colour: #2563EB (a rich blue). You need to build a full colour system with backgrounds, hover states, text colours, and dark mode variants.

    Step 1: Convert to HSL

    Paste #2563EB into the converter. Result: hsl(217, 83%, 53%). The hue is 217 (blue), saturation is 83% (vivid), lightness is 53% (mid-tone). These three numbers are your system's DNA.

    Step 2: Generate the scale

    Keep H=217 and S=83 fixed. Create stops at L=97% (tinted background), L=90% (borders), L=70% (disabled), L=53% (primary), L=43% (hover), L=33% (active), L=20% (dark mode accent), L=10% (dark mode background). That's 8 colours from 1 input.

    Step 3: Check contrast

    White text on L=53% (primary button): 4.7:1, passes AA. White text on L=43% (hover): 6.5:1, passes AAA. Dark text on L=97% (background): 15:1, excellent. All pairs checked and documented.

    Step 4: Export

    Convert each HSL stop back to HEX for your CSS variables. --primary-50: #EFF6FF, --primary-100: #DBEAFE, --primary-400: #60A5FA, --primary-500: #2563EB, --primary-600: #1D4ED8, --primary-700: #1E3A8A, --primary-900: #1E2A5E.

    Common Mistakes

    Eyeballing accessibility

    "It looks fine to me" isn't enough. Colour blindness affects 8% of men. Always calculate the contrast ratio mathematically. What looks readable to you may be invisible to someone with deuteranopia.

    Using RGB for colour scales

    Adjusting R, G, B values to create lighter/darker versions is unpredictable, you change the hue as well as the lightness. Use HSL or OKLCH where lightness is an independent axis.

    Mismatched colour spaces

    Designing in P3 colour space (on a Mac) and deploying to sRGB screens. Colours look duller than expected. Always test on sRGB displays and use @media (color-gamut) for P3 enhancements.

    Colour as only indicator

    Using red/green alone to show error/success. Colour-blind users can't distinguish them. Always pair colour with another indicator: icons, text labels, or patterns.

    Hardcoding colours

    Scattering hex values throughout your CSS instead of using variables. When the brand colour changes, you're doing search and replace across 200 files. Use CSS custom properties from day one.

    Forgetting dark mode

    Your light-mode colours don't automatically work on dark backgrounds. White text on yellow fails in both modes. Build dark mode into your colour system from the start, it's much harder to retrofit.

    Related Tools

    Colour Palette Generator

    Generate harmonious colour schemes

    CSS Gradient Generator

    Create smooth colour gradients for CSS

    CSS Box Shadow Generator

    Design coloured shadows visually

    Number Base Converter

    Understand hex values and base conversion

    PX to REM Converter

    Convert CSS size units

    CSS Border Radius

    Generate rounded corners visually

    How to use this tool

    1

    Enter a colour in HEX, RGB, or HSL

    2

    See all other formats update instantly

    3

    Click any value to copy it

    Common uses

    • Converting Figma HEX colours to CSS RGB values
    • Creating HSL colour variations for design systems
    • Translating colour values between design and code
    • Checking colour values for accessibility contrast

    Share this tool

    Frequently Asked Questions

    What colour formats are supported?
    HEX (3 or 6 digit), RGB (0-255), and HSL (hue 0-360, saturation 0-100, lightness 0-100). All formats are converted in real time.
    Can I use the native colour picker?
    Yes! Click the colour swatch at the top to open your operating system's colour picker and select any colour visually.
    Is this tool free and private?
    Yes. All conversions happen in your browser with zero data transmission.
    What's the difference between HEX, RGB, and HSL?
    HEX (#10B981) and RGB (16, 185, 129) describe the same thing, the red, green, and blue light values that make up the colour. HSL (160, 84%, 39%) describes the colour in terms of hue, saturation, and lightness, which is often more intuitive for tweaking a design. All three represent identical colours on screen.
    When should I use HSL over HEX?
    HSL is easier when you want to generate a palette (change hue while keeping saturation and lightness steady) or build light/dark themes (change lightness while keeping hue steady). HEX and RGB are better when you need the shortest form for CSS or when copying from a design tool.
    What is alpha transparency and which formats support it?
    Alpha is a fourth value that controls opacity, 0 is fully transparent and 1 (or 255) is fully opaque. RGB supports it as rgba(16, 185, 129, 0.5). HEX supports it as 8-digit hex (#10B98180). HSL supports it as hsla(160, 84%, 39%, 0.5). All modern browsers handle all three.
    Why does my colour look different on different screens?
    Screens vary in colour accuracy, brightness, and colour space (sRGB vs P3). A red that looks vivid on an iPhone may look muted on an old laptop. For brand work, always test on multiple devices and consider P3 colour values for newer displays.

    Results are for general informational purposes only and should be checked before use. They are not professional advice. See our Disclaimer and Terms of Service.