huebic
Tools / Convert

Color Converter

Paste anything CSS understands — #4a90d9, rgb(74 144 217), oklch(0.65 0.13 250), lab(58 -2 -45), color(display-p3 …) or a color name. Edit any channel below and everything else follows. Theory: CIE 1931 and XYZ · CIELAB · OKLab → Browse color names →

Input
Code
Self-contained, no libraries, free to use (CC0). Tap a card's title to switch format.

    

  


  

    
Show your work — sRGB → CIELAB, step by stepIEC 61966-2-1 · CIE 15:2004 · Bradford

    

  

  
  

    
How it worksone color, many ways to write it

    

      

        
Paste any color

        
Type or paste a color the way you have it: a hex code like #4a90d9, rgb(), hsl(), oklch(), a Display P3 value, or simply a name like "coral" or "sunflower". huebic works out what it is.

        
The little labels underneath tell you about the color at a glance: whether every screen can show it, how bright it is, and how readable it is against white and black. Hover over one (or tap it on a phone) for a short explanation.

      

      

        
One color, many languages

        
Each card is the same color written in a different system, a bit like the same sentence in different languages. Change any number on any card and all the others update straight away.

        
Click a card's title to get that format as ready-made code in the Code panel.

      

      

        
Which one do I need?

        
    
          
  • HEX and RGB: the everyday web formats. Every tool understands them.
    • 
          
  • HSL, HSB and HWB: easy to tweak by hand, for example "a bit lighter" or "less saturated".
    • 
          
  • OKLCH and OKLab: the modern choice for CSS. Changing one number does what you expect, which makes them great for building palettes.
    • 
          
  • CIELAB and LCh: what Photoshop and print workflows use.
    • 
          
  • CMYK: for print (see below).
    • 
          
  • XYZ and xyY: the scientific base the others are built on, used in lighting and color measurement.
    • 
        

      

      

        
Printing in CMYK

        
A screen makes color with light; a printer makes it with ink on paper, so not every screen color can be printed. huebic converts through a real printing profile, the same kind your print shop uses. Pick the one that matches your paper and press.

        
Ink is the total amount of ink, which presses limit (often to around 300%). If you see Out of print gamut, the press can't reach that color; click the label to switch to the closest color it can print.

      

      

        
Code you can copy

        
The Code panel gives you a small, self-contained snippet for CSS, JavaScript or Python that turns sRGB into the chosen format. No libraries needed, and it's free to use in any project.

      

      

        
Show your work

        
Curious how the numbers are made, or checking your own code? The last panel walks through every step from screen color to CIELAB, with the actual numbers for your color and the standards each step comes from.