Colour converter and palette
Convert between HEX, RGB, HSL, HSV, CMYK and CSS colour names, check contrast for accessibility, and get tints, shades and harmonies.
Loading…
Runs in this page in your browser; nothing is uploaded.
About this tool
Type a colour in any common notation and get it in HEX, RGB, HSL, HSV, CMYK and, where one matches, its CSS name. Use it to turn a value from a design file into CSS, to switch between HEX and RGB, or to check whether a text colour is readable on white or black.
Set the opacity to get RGBA, HSLA and HEX with alpha (#RRGGBBAA). The page rates contrast against white and black by the WCAG levels, and builds 9 tints, 9 shades and complementary, analogous, triadic and split complementary colours. Everything runs in your browser; nothing is uploaded.
How to use it
- Type a colour into the “Colour” box, such as #7954AD, rgb(121, 84, 173) or steelblue, or choose one with “Pick”.
- Drag the “Opacity” slider if you need transparency; RGBA, HSLA and “HEX + Alpha” follow it.
- Select “Copy” next to the notation you need. The last rows show the contrast on white and on black, with its rating.
- Select any swatch under “Palette” to make it the current colour and keep working from there.
Common questions
Which colour notations can I type?
HEX with 3, 4, 6 or 8 digits (best written with #), rgb() and rgba(), hsl() and hsla(), hsv() or hsb(), cmyk() with percentages or fractions from 0 to 1, CSS colour names and transparent. Three plain numbers such as “255, 0, 0” are read as RGB. If the text cannot be read, the page says so and keeps showing the last valid colour.
What do AA and AAA mean?
They are WCAG accessibility levels for contrast: 4.5:1 or more is AA, 7:1 or more is AAA, and from 3:1 the page shows “AA large text”, which suits large text only. Below 3:1 it shows “Low”. A translucent colour is blended with the background before the ratio is worked out.
Why does the CMYK value differ from my design software?
CMYK here is calculated from RGB with a simple formula and no ICC colour profile. For print, use the values your design software gives with the printer’s profile.
How are the tints, shades and harmonies made?
Tints and shades mix the colour with white or black in steps from 10% to 90%. Harmonies turn the hue on the colour wheel: complementary by 180°, analogous by ±30°, triadic by 120° and 240°, and split complementary by 150° and 210°.
Why is no CSS name shown?
A name appears only when the colour exactly matches one of the CSS named colours, for example #FF0000 is red. For any other colour that row is hidden.
Related tools
Colour picker
Pick colours from anywhere on screen (Chrome and Edge) or from an image, and find an image’s main colours.
Convert image format (HEIC to JPG, PNG, WebP)
Convert images between JPEG, PNG, WebP, GIF, BMP, TIFF and ICO icons, and turn iPhone HEIC or HEIF photos into JPG, PNG or WebP; AVIF can also be read where the browser decodes it. Animated images are not supported, and files are not uploaded.
Convert images to ICO icons
Make a Windows or website icon (favicon.ico) holding several sizes from 16 to 256 px, with optional rounded corners or a circle.
QR code and barcode generator
Make QR, Data Matrix, PDF417, Aztec, Code 128, Code 39, Code 93, EAN, UPC-A, ITF or Codabar images as PNG or SVG, one code or one per line.
QR code and barcode reader
Read QR codes and barcodes from up to 20 PNG, JPEG or WebP images, including several codes in one image.
Scan QR codes with the camera
Read QR codes and barcodes live from a camera or webcam; links are shown, not opened.