FIRST CH TOOLS LOCAL PROCESSING — NOTHING IS UPLOADED 日本語

FIRST CH TOOLS / 22 COLOR

Color Code Converter & Alpha Transparency Calculator

Pick one colour and the HEX, RGB, HSL and OKLCH code all appear at once. Move the alpha slider to build rgba() / hsla() / 8-digit HEX, and see the colour you actually get once it sits on a background along with its contrast ratio.

One colour in, every format out

ColourPaste HEX / rgb() / hsl() / oklch() / a CSS colour name such as tomato
Presets
#c8501f
ON WHITEText in this colour Aa 0123
ON DARKText in this colour Aa 0123
HEX#c8501f
HEX8#c8501fff
RGBrgb(200 80 31)
RGBArgb(200 80 31 / 1)
HSLhsl(17.4 73.2% 45.3%)
HSLAhsl(17.4 73.2% 45.3% / 1)
OKLCHoklch(56% 0.16 41)
4.11
Contrast vs white
5.11
Contrast vs black
Black text
Text colour that passes AA
56.5%
Lightness L (OKLCH)
0.166
Chroma C (OKLCH)
Ready to paste into CSS

    
    
  
    

  
    Every conversion happens inside this page — nothing you type leaves the browser. Directly callable via URL parameters: /en/color/?c=%23c8501f&a=50 / /en/color/?c=oklch(56%25 0.16 41)
    
  
    

  

  

  
    
    
    How to Use
    
    
      
      
    1. Enter a colourUse the picker, or paste #c8501f, rgb(200 80 31), hsl(17 73% 45%), oklch(56% 0.16 41) or tomato into the box.
      2. 
      
    2. Set the alphaDragging the slider updates rgba(), hsla() and the 8-digit HEX as you go. The “Alpha” tab adds a background colour and shows the composited result.
      3. 
      
    3. Copy the codeCopy one line at a time, or take the whole set out of the export box as CSS custom properties, SCSS, JSON or a Markdown table.
      4. 
    
    
  
    

  
    
    
    About This Tool
    
    
    HEX, RGB, HSL and OKLCH are four ways of writing the same colour. HEX and RGB carry identical numbers (the three primaries, 0–255) in hexadecimal or decimal; HSL restates them as hue, saturation and lightness, which is easier to reason about by hand; OKLCH is a newer space designed so that equal lightness values look equally bright. This tool converts between them against sRGB.
    
    
    
      
    Alpha means the result depends on the background
    
      
    rgba(0, 0, 0, 0.5) is not a shade of black — it is an instruction to darken whatever is behind it by half. Over white it lands on #808080; over the paper tone #faf8f4 it lands on #7d7c7a. The result on the background column computes that composite (foreground × α + background × (1−α)), which is what you need when a semi-transparent layer from a mockup has to be implemented as a solid HEX.
    
    
    
    
    
      
    8-digit HEX vs rgba()
    
      
    The 8-digit form, where the last two digits are the alpha, works in Chrome, Safari, Firefox and Edge — in practice only IE 11 lacks it. The awkward part is that 50% alpha is written 80 (128 ÷ 255), so percentages are not obvious. When you want to write the alpha as a percentage, or keep the colour and the alpha in separate CSS variables, the modern rgb(200 80 31 / 50%) form is easier to work with.
    
    
    
    
    
      
    OKLCH keeps the hue when you change the lightness
    
      
    Lower the lightness in HSL and blues sink into black while yellows turn muddy, because the numbers do not match how the eye works. oklch() is perceptually uniform, so changing only L gives a tone that keeps the character of the hue. That makes it the right space for building a 100–900 UI scale, and it has shipped in Chrome, Safari and Firefox since 2023.
    
    
    
    
    
      
    Anything outside sRGB has its chroma reduced
    
      
    OKLCH can describe colours beyond sRGB, so a value like oklch(70% 0.35 140) cannot be shown on a normal screen. Clipping the RGB channels to 0–255 shifts the hue as well, so this tool follows the same idea as the CSS Color 4 gamut mapping: keep the lightness and hue, and lower the chroma until it fits. When that happens, a note appears under the result.
    
    
    
    
    
      
    Measure contrast on the flattened colour
    
      
    A WCAG contrast ratio is defined between two opaque colours, so a semi-transparent value cannot be judged directly. To check translucent text or panels, take the composited colour first and compare that. For a full AA/AAA verdict on a fixed pair of colours, see the Contrast Checker.
    
    
    
    
    
      
    There are 148 CSS named colours
    
      
    Names such as tomato and rebeccapurple can be pasted straight in, and when your colour matches one exactly the name is shown in the notes. They are a poor choice for a team palette, though: several values carry two names (aqua and cyan, gray and grey), and the history is uneven — gray is #808080 while green is #008000 and lime is #00ff00.
    
    
    
  
    

  
    
    
    From AI Agents
    
    
    This conversion is also available as the color_convert tool of the MCP (Model Context Protocol) server @first-ch/tools-mcp, so an AI agent can call it directly without a browser. See Using these tools from AI agents for setup.
    
    
    Setup
    
    
    claude mcp add firstch-tools -- npx -y @first-ch/tools-mcp
    
    
    Examples
    
    
    # every format from a HEX value
color_convert(color="#c8501f")

# rgba() / hsla() at 40% alpha, plus the composite over white
color_convert(color="#23282e", alpha=0.4, background="#ffffff")

# an OKLCH value (chroma is reduced if it falls outside sRGB)
color_convert(color="oklch(70% 0.35 140)")

# just the lightness palette
color_convert(color="dodgerblue", alphaTable=false)
    
  
    

  
    
    
    Other Tools