• ARTICLE
  • STRING
  • CONVERTER
  • ENCRYPT
  • NETWORK
  • MORE
    CHART
    MATH
    COORDINATE
    IMAGE
    FILE
  • ARTICLE
    STRING
    CONVERTER
    ENCRYPT
    NETWORK
    MORE
    CHART
    MATH
    COORDINATE
    IMAGE
    FILE
logo Online Tools
3 Comments Favorite Copy Link Share

CSS Color Converter


  • Single Convert
  • Batch Convert
example input :
Preview Format Result (Click to copy)
Name
HEX
HEX8
RGB
RGB%
HSL
HSV
HWB
NO. Input Value Result Status
CSS Color Converter-summary

The online CSS color convert tool supports color conversion between rgb, hex, hsl, hsv, hwb and other formats.

CSS Color Converter-instructions
  1. Please enter or select a color value. Enter the supported color name, hex color, hex8 color, RGB color, RGBA color, HSL color, HSLA color, HSV color, HSVA color and HWB color.
  2. If the entered color value does not have a corresponding color name, the color name result is none.
  3. This tool additionally supports color value conversion in the following formats : sRGB Linear , HSLuv , OKLCh , OKLab , Okhsl , Okhsv , P3 , P3 Linear , REC.2020 Linear , REC.2020 , REC.2020-PQ , REC.2020-HLG , Absolute XYZ D65 , XYZ D65 (xyz) , XYZ D50 , Jzazbz , JzCzHz , ICTCP , ACEScg , ACEScc , Lab , LCh , ProPhoto , ProPhoto Linear , Adobe98RGB (a98rgb) , Adobe98RGB Linear(a98rgb-linear) , HCT , HPLuv , LChuv , Lab D65 , Luv , CMY , CMYK , YUV , YCbCr .
  4. YUV color format, Y value range is [0,1], U value range is [-0.436,0.436], V value range is [-0.615,0.615] .
  5. YCbCr color format, Y value range is [0,255], Cb value range is [-127.5,127.5], Cr value range is [-127.5,127.5] . If necessary, the values of Cb and Cr can be increased by 127.5 to adjust the range of Cb and Cr values to [0,255].
  6. CSS does not support hsv and hsva colors. This tool is only displayed as the conversion result.
  7. CSS properties related to color : color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, column-rule-color, print-color-adjust.
  8. CSS color value introduction :
    1. Color Name : Color names are case insensitive identifiers that represent a specific color. such asred, black, white, transparent(represents a completely transparent color). The color name does not define transparency. If you use an unknown color name, the color name will not work.
    2. RGB Color : Colors can be defined in two ways using the red green blue mode: Hexadecimal characters prefixed with # and function ( rgb(), rgba() ) notations.
      • Hexadecimal : #RRGGBB[AA] or #RGB[A]. R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0–9, A–F). A is optional. For example, #ff0000 is equivalent to #ff0000ff. The three-digit notation (#RGB) is a shorter version of the six-digit form (#RRGGBB). For example, #f09 is the same color as #ff0099. Likewise, the four-digit RGB notation (#RGBA) is a shorter version of the eight-digit form (#RRGGBBAA). For example, #0f38 is the same color as #00ff3388.
      • Functional notations : rgb[a](R, G, B[, A]) or rgb[a](R G B[ / A]). R (red), G (green), and B (blue) can be either number or percentage, where the number 255 corresponds to 100%. A (alpha) can be a number between 0 and 1, or a percentage, where the number 1 corresponds to 100% (full opacity).
    3. HSL Color : The HSL color model defines a given color in the sRGB color space according to its hue, saturation, and lightness components. An optional alpha component represents the color's transparency.
      • Functional notations : hsl[a](H, S, L[, A]).
        H (hue) is an angle of the color circle given in degs, rads, grads, or turns in the CSS Color specification. When written as a unitless number, it is interpreted as degrees, as specified in the CSS Color Level 3 specification. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an angle, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.
        S (saturation) and L (lightness) are percentages. 100% saturation is completely saturated, while 0% is completely unsaturated (gray). 100% lightness is white, 0% lightness is black, and 50% lightness is "normal".
        A (alpha) can be a number between 0 and 1, or a percentage, where the number 1 corresponds to 100% (full opacity).
      • Functional notations : hsl[a](H S L[ / A]). CSS color level 4 supports values separated by spaces.
    4. HSV Color : HSV represents hue, saturation, and value.
      Functional notations : hsv[a](H, S, V[, A]).
    5. HWB Color : Similar to HSL color model, the HWB color model defines a given color in the sRGB color space according to its hue, whiteness and blackness components.
      Same as HSL: H (hue) is an angle of the color circle given in degs, rads, grads, or turns in the CSS Color specification. When written as a unitless number, it is interpreted as degrees, as specified in the CSS Color Level 3 specification. By definition, red=0deg=360deg, with the other colors spread around the circle, so green=120deg, blue=240deg, etc. As an angle, it implicitly wraps around such that -120deg=240deg, 480deg=120deg, -1turn=1turn, etc.
      W (whiteness) and B (blackness) are percentages. These two colors mix, so you would need 0% whiteness and 100% blackness to produce the color black. And vice versa 100% whiteness and 0% blackness for the color white. 50% of both values renders a mid grey and any other variations a shade of the hue specified.
      A (alpha), optional, can be a number between 0 and 1, or a percentage, where the number 1 corresponds to 100% (full opacity). When specifying an alpha value it must be preceded with a forward slash (/).
      Functional notations : hwb(H W B[ / A])