Close Menu
    Subscribe

    HTML COlor Codes






    HTML Color Codes — Hex, RGB, HSL Color Picker & Converter





    HTML Color Codes

    Welcome to the all-in-one HTML color codes tool. Pick any color and instantly get its hex code, RGB, HSL, and RGBA values, ready to copy straight into your CSS. Whether you’re designing a website, building a brand palette, or just need the right shade of blue, everything you need is right here.

    Use the visual color picker to drag and choose a color, generate matching shades and tints, explore harmonies on the color wheel, convert between formats, or browse all 140 named CSS colors. It’s free, works in your browser, and needs no sign-up.

    Hex codes
    RGB & RGBA
    HSL values
    Shades & tints
    Color wheel
    Format converter
    140 CSS color names

    Color picker

    Pick a color and get its code in every format instantly. Click any code card to copy.


    RGB
    rgb(67,97,238)
    HSL
    hsl(231,82%,60%)
    RGBA
    rgba(67,97,238,1)
    CSS
    background:#4361EE


    100%





    H231
    S82
    L60
    R67
    G97
    B238

    Hex
    #4361EE
    RGB
    rgb(67,97,238)
    HSL
    hsl(231,82%,60%)
    RGBA
    rgba(67,97,238,1)
    CSS background
    background:#4361EE
    CSS color
    color:#4361EE
    8-digit Hex (with alpha)
    #4361EEFF
    OKLCH (CSS4)
    oklch(52% 0.19 264)

    Shades — darker variations
    Tints — lighter variations
    Tones — desaturated variations

    Brightness

    Color harmonies

    Hex → RGB & HSL


    RGB → Hex & HSL




    HSL → Hex & RGB




    ⚲

    Common HTML color codes

    The most commonly used HTML colors with their hex, RGB, and HSL values. Click any hex code to copy.

    Color Name Hex code RGB HSL

    What are HTML color codes?

    HTML color codes are ways of representing colors in a format that web browsers and design tools can interpret. Every color you see on a website — text, backgrounds, borders, icons — is defined by one of these formats. The three most widely used are hex codes, RGB values, and HSL values.

    Understanding color codes helps you work more precisely in CSS, pick consistent brand colors, and communicate color choices clearly between designers and developers.

    Hex color codes

    A hex color code is a six-character string prefixed with #. The six characters are split into three pairs, each representing the red, green, and blue channels of the color. Each pair is a two-digit hexadecimal number — ranging from 00 (0 intensity) to FF (full intensity).

    For example, #FF0000 is pure red (full red, no green, no blue). #FFFFFF is white (all channels at full), and #000000 is black (all channels at zero).

    RGB color values

    RGB stands for Red, Green, Blue. In CSS, it is written as rgb(R, G, B) where each value is a number from 0 to 255. RGB is the same underlying model as hex — the difference is just the notation. Many designers find RGB easier to read and reason about than hex.

    For example, rgb(255, 165, 0) is orange. The same color in hex is #FFA500.

    HSL color values

    HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0° = red, 120° = green, 240° = blue). Saturation is a percentage of color intensity. Lightness is a percentage of brightness from black to white.

    HSL is particularly useful when you want to create variations of a color — just adjust the lightness to get a shade or tint, or reduce saturation to get a muted tone. For example, hsl(231, 82%, 60%) is a medium blue, and hsl(231, 82%, 80%) is a lighter version of the same hue.

    RGBA and HSLA — colors with transparency

    Both RGB and HSL have alpha variants — RGBA and HSLA — that add a fourth parameter controlling opacity. The alpha value runs from 0 (fully transparent) to 1 (fully opaque). For example, rgba(67, 97, 238, 0.5) gives a 50% transparent blue.

    Frequently asked questions

    Common questions about HTML color codes, hex values, and color formats.

    What is a hex color code? +
    A hex color code is a six-digit hexadecimal number prefixed with # that represents a color in the RGB model. Each pair of digits controls the intensity of red, green, and blue respectively — from 00 (none) to FF (maximum). For example, #FF0000 is pure red because the red channel is at full (FF), while green and blue are zero (00).

    How do I convert hex to RGB? +
    Split the six-character hex code into three two-character pairs. Convert each pair from hexadecimal to a decimal number between 0 and 255. Those three decimal numbers are your R, G, and B values. For example, #1A2B3C splits into 1A (= 26), 2B (= 43), 3C (= 60), giving rgb(26, 43, 60). Use the converter tab in the tool above to do this instantly.

    What is the difference between HSL and RGB? +
    RGB describes color by mixing red, green, and blue light channels. HSL describes color by its perceptual properties — hue (which color), saturation (how vivid), and lightness (how bright). Both systems describe the same colors; HSL is often more intuitive for generating color variations, while RGB maps directly to how screens display color.

    How many HTML color names are there? +
    CSS defines 140 named colors that are supported in all modern browsers. These range from basic names like Red, Blue, and Green to more descriptive names like CornflowerBlue, PapayaWhip, and MediumSlateBlue. All 140 are listed in the Color names tab in the tool above — you can search by name and click any to load it into the picker.

    What is a color shade vs a tint vs a tone? +
    A shade is a color with black added, making it darker. A tint is a color with white added, making it lighter. A tone is a color with gray added, making it more muted without changing its brightness significantly. In HSL terms: shades reduce lightness, tints increase lightness, and tones reduce saturation.

    What does RGBA mean in CSS? +
    RGBA is an extension of RGB that adds an alpha (opacity) channel. The format is rgba(R, G, B, A) where A is a number from 0 (fully transparent) to 1 (fully opaque). For example, rgba(0, 0, 0, 0.5) is a 50% transparent black. Use RGBA when you need semi-transparent overlays, shadows, or backgrounds in CSS.

    Copied!