Go Pro

ColorShift

Free Color Converter

Convert any colour between HEX, RGB, HSL and CMYK, get tints and shades, and check text contrast against black and white.

FreeUnlimited
Pro · $1.29/monthSame as Free for now
Coming to ProSaved palettes
See plans

Loading tool…

What is ColorShift?

ColorShift is a free color converter for designers, developers and anyone matching a brand colour. Type a HEX code, an rgb() or hsl() value, or a CSS colour name like “tomato”, or use the picker, and it shows the same colour as HEX, RGB, HSL and CMYK, each ready to copy.

It also checks readability. ColorShift works out the contrast ratio of your colour as text on white and on black and rates it against the WCAG AA and AAA levels. Below that, a row of four tints and four shades gives you lighter and darker versions to build a palette from.

It all runs in your browser, so it answers instantly as you type and nothing is sent to a server. Every value is copied to your clipboard with one click, ready to paste into a stylesheet, a design app or a message to whoever handles your printing.

What you can do

  • HEX, RGB, HSL and CMYK

    Enter a colour once and copy it in any of four formats, written the way CSS and design apps expect.

  • Type it any way

    Accepts HEX codes, rgb() and hsl() values and CSS colour names, or pick a colour with the built-in picker.

  • Contrast checker

    See the contrast ratio of your colour as text on white and on black, with an AAA, AA, AA large only or fails rating.

  • Tints and shades

    Four lighter tints and four darker shades of your colour. Click one to load it and convert it too.

  • One-click copy

    Every value has its own copy button, so it goes straight into your stylesheet or design file.

How to use Color Converter

  1. Type or pick a colour
  2. Copy any format
  3. Check contrast and shades

Good for

  • Turning a brand HEX code into RGB or HSL for CSS
  • Getting CMYK values to hand over for printed material
  • Checking that a text colour is readable enough for accessibility
  • Building hover states and palettes from one base colour

Questions about Color Converter

How do I convert HEX to RGB?

Type or paste the HEX code, like #7150F6, into ColorShift. The RGB value appears straight away along with HSL and CMYK, ready to copy.

Can I convert RGB to HEX?

Yes. Type the value as rgb(113, 80, 246) and ColorShift shows the HEX code. It reads hsl() values and colour names the same way.

Can I enter a CMYK value?

Not yet. ColorShift converts HEX, RGB, HSL and colour names into CMYK, but it doesn't read CMYK as input.

Are the CMYK values exact for printing?

They are a straight calculation from RGB without a printer colour profile, which is fine as a starting point. For exact print colours, confirm with your printer or design software.

What do AA and AAA mean in the contrast check?

They are WCAG accessibility levels for text. AA needs a ratio of at least 4.5:1 for normal text, AAA needs 7:1, and “AA large only” means 3:1, which is enough only for large text.

Is the color converter free?

Yes, with no limits. Values are copied to your clipboard, so you don't need an account, and nothing you enter leaves your browser.