Loading page
About this tool
Convert colors between HEX, RGB, RGBA, HSL, HSLA, HSV, and CMYK formats with a live preview swatch, harmonies, and one-click copy.
Color Conversions turns one colour into seven notations at once — HEX, RGB, RGBA, HSL, HSLA, HSV and CMYK — and adds the two things you usually need next: its contrast ratio against white and black scored to WCAG, and a set of harmonies derived by rotating the hue. RGB and HSL sliders plus an alpha slider let you nudge the value and watch every output update live. It suits developers and designers picking a colour rather than merely translating one they already have.
Open Color Conversions on AltFTool — it loads instantly in your browser.
Set your color in the 'All formats' grid: type into the HEX, RGB, RGBA, HSL, HSLA, HSV or CMYK field of any card and the other six follow, or press 'Color Wheel' to pick one visually. 'Reset' returns everything to #14B8A6.
Fine-tune with the 'Interactive Color Sliders' — Red, Green and Blue under RGB Parameters, plus Hue, Saturation, Lightness and Alpha / Opacity under HSL & Transparency — each showing its current value beside the label.
The swatch at the top prints the hex over your live color, and its 'Readability Contrast (WCAG)' panel scores 'On White Text' and 'On Black Text' as AAA Pass, AA Pass, Large Text AA or Fail; the 'Color harmonies' section below lays out Complementary, Analogous, Triadic, Tetradic and five Shades. Hover any format card to reveal its Copy button, which reads Copied once the value is on your clipboard.
Design software and colour pickers usually work in hue-saturation-value, so the HSV reading saves a second conversion step.
Every colour is rated against white and black on the WCAG scale — AAA at 7:1, AA at 4.5:1, large-text AA at 3:1 — so unusable choices are caught at the point of choosing.
Complementary, analogous, triadic and tetradic swatches are generated by hue rotation, plus a five-step lightness ramp from the same base colour.
They share hue but differ in the third channel: HSL's lightness reaches pure white at 100 percent, whereas HSV's value reaches the most vivid version of the hue, with white only when saturation is also zero. Both are shown here for the same colour so you can move between CSS and design tools without guessing.
By rotating the hue in HSL while holding saturation and lightness. Complementary is 180 degrees away, analogous is plus and minus 30, triadic is plus and minus 120, and tetradic uses plus and minus 60 together with 180.
They are the WCAG contrast grades for your colour against white and against black. 7:1 or higher is AAA, 4.5:1 or higher is AA for body text, 3:1 or higher passes only for large text, and anything below 3:1 is marked a fail.
Yes. Eight-digit hex and rgba()/hsla() strings are accepted, and the alpha slider runs from 0 to 1 in steps of 0.01. Alpha appears in the HEX, RGBA and HSLA outputs; RGB, HSL, HSV and CMYK are opaque by definition.