Color Converter & Palette Studio

A colour converter is a tool that expresses one colour in many different notations. A colour is just a point in a colour space — a set of numbers — but there are dozens of ways to write those numbers down, and different contexts expect different ones. A web page wants #10b981 or rgb(16, 185, 129); a design tool might show you hsl(160, 84%, 39%); a print shop needs cmyk; and a modern, perceptually-even palette is best built in oklch. The converter accepts any of these, parses it into a single internal representation, and emits all the others at once — so the exact same shade is available in whatever form the next step of your workflow demands.

Under the hood the process is always the same three steps. First the tool parses your input, recognising the format from its syntax — a leading # and hex digits, an rgb(...) wrapper, an hsl triple, or even a plain CSS colour name like crimson. Second it normalises that input into a common base — here, an RGBA value with an alpha channel — which is the hub every other format converts to and from. Third it formats that base into each target notation using the standard conversion maths, rounding sensibly for display. Because the base carries an alpha channel, transparency survives the round trip: an rgba() or eight-digit HEX in gives you HEXA, rgba() and hsla() out.

What makes a converter genuinely useful is breadth and accuracy together. Breadth means covering not just the everyday trio of HEX, RGB and HSL but the whole family — HSV/HSB for colour pickers, HWB for intuitive tinting, CMYK for print, and the perceptual spaces LAB, LCH, XYZ, OKLab and OKLCH for measuring and generating colour. Accuracy means using the right matrices: sRGB with a D65 white point for the CIE spaces, and Björn Ottosson's coefficients for OKLab. RGB, HEX, HSL, HSV and HWB conversions are exact and reversible; LAB, LCH, XYZ and the OK spaces are accurate to display precision; CMYK alone is a naive approximation, because a faithful print conversion needs an ICC profile the browser does not have.

This converter is also bidirectional and live. There is no convert button to press: change the HEX field and the RGB, HSL and every other field recompute instantly, and editing the HSL lightness slider flows back the other way. Around that core sit the features a colour rarely travels alone with — a visual picker and screen eyedropper to capture a shade, palette and harmony tools to build a set around it, a Tailwind scale generator, gradient builder, contrast checker, colour-blindness simulator and token export. Every one of these runs locally using browser APIs, so you can paste confidential brand colours and unreleased themes with the certainty that nothing ever leaves your device.

Three notations dominate everyday web work, and they all describe the same sRGB colours — they just write them differently. HEX is the compact form you see in stylesheets and design tools: a # followed by three pairs of hexadecimal digits, one each for red, green and blue, where 00–ff maps to 0–255. So #10b981 is red 16, green 185, blue 129. RGB writes those same three channels as decimal numbers — rgb(16, 185, 129) — which is easier to read and to generate from code, and adds an optional alpha as rgba(). Both are just two spellings of an additive light mix, and converting between them is loss-free in either direction.

HSL describes the very same colour from a human point of view rather than a hardware one. Instead of three light amounts it gives you Hue (the angle on the colour wheel, 0–360°), Saturation (how vivid, 0–100%) and Lightness (how light or dark, 0–100%). That is far easier to reason about: to make a colour a little lighter you raise one number; to mute it you lower the saturation; to shift it towards its neighbour you nudge the hue. #10b981 becomes hsl(160, 84%, 39%) — a green at 160° on the wheel, strongly saturated, on the darker side of mid lightness. The conversion is exact, so you can hop to HSL to make an adjustment and back to HEX to ship it.

The conversions themselves are simple enough to understand. HEX to RGB just reads each digit pair as a base-16 number, and RGB to HEX does the reverse, padding each channel to two digits — which is also where the classic shorthand comes from: when both digits of every pair match, #ffffff can be written #fff. RGB to HSL is a little more involved: it finds the maximum and minimum of the three channels to derive lightness, uses their spread for saturation, and computes the hue from which channel is largest. None of this changes the colour — HEX, RGB and HSL are three windows onto one sRGB point.

So which should you reach for? Use HEX as the portable default — it is the most widely understood and the shortest to paste. Use RGB(A) when you are generating colour programmatically or need an explicit alpha channel. Use HSL whenever you are adjusting a colour rather than just recording it, because moving one slider does the predictable thing. A common workflow is to pick or paste in HEX, switch to HSL to dial in a lighter or more muted variant, then copy the result back out as HEX — and because this converter keeps all three in sync live, you never have to do that maths by hand.

A colour model is a system for describing colours as numbers, and a colour space pins that model to real, physical colours. The single most important distinction between models is whether they are additive or subtractive. Additive models mix emitted light: start from black and add red, green and blue, and at full strength all three combine to white — this is how screens, which emit light, produce colour, and it is why RGB underpins everything on the web. Subtractive models mix pigment that absorbs light: start from white paper and add cyan, magenta and yellow ink, each subtracting part of the spectrum, until together they approach black — this is how printing works, which is why print uses CMYK.

RGB and its sibling HSL are the additive web foundation; HSV/HSB (Hue, Saturation, Value/Brightness) is the same additive space rearranged for picking, with the 2-D square most colour pickers show. HWB (Hue, Whiteness, Blackness) is a CSS model that starts from a pure hue and mixes in white to tint or black to shade, which is wonderfully intuitive for building lighter and darker variants. CMYK is the subtractive print model. Then there is a family built not for hardware but for human perception: XYZ is the device-independent foundation the CIE defined in 1931; LAB and its cylindrical form LCH spread colours so that equal numeric distances look like equal perceived differences; and OKLab with OKLCH are the modern refinement that finally make lightness and hue behave the way the eye expects.

The perceptual spaces deserve a closer look because they solve a real problem. In HSL, two colours with the same lightness value can look wildly different in brightness — a saturated yellow at 50% lightness reads far brighter than a blue at the same 50% — so palettes stepped evenly in HSL come out uneven, and rotating the hue can shift apparent lightness too. LAB fixed much of this by modelling perceived difference, and LCH made it editable by giving lightness, chroma and hue as separate dials. But LAB still has hue-shift artefacts, especially in blues. OKLab and OKLCH are the current best answer: their lightness genuinely matches perception, and hue stays put as you change chroma, which is exactly why a scale stepped in OKLCH looks evenly spaced and keeps its identity from light to dark.

You do not need to memorise the matrices to use them well — you just need to know which model fits which job, and let the converter do the arithmetic. Reach for RGB/HEX to ship to the web, HSL or HWB to adjust a single colour by hand, HSV when your design tool's picker speaks it, CMYK to estimate a print result, and the OK spaces whenever you are generating a family of colours that must look consistent. This tool shows all of them at once for any input, so you can read across from the format you have to the one you need without ever leaving the page.

Colour theory is the set of principles for combining colours so they look intentional rather than accidental, and it starts with the colour wheel — hues arranged in a circle from red through yellow, green, cyan, blue and magenta and back to red. Because the wheel is just hue plotted around 360°, the relationships between colours become geometric: colours opposite each other clash dramatically, colours next to each other blend calmly, and colours spaced evenly feel balanced. Every harmony rule below is ultimately a recipe for which angles to pick, which is exactly why this tool can generate them by rotating the hue of your base colour.

The three properties you adjust are hue, saturation and lightness. Hue is the colour itself — its position on the wheel. Saturation is its intensity, from a vivid pure colour down to a flat grey. Lightness is how much black or white is mixed in, from near-black to near-white. Holding hue constant while you vary saturation and lightness gives you a family of tints, tones and shades of one colour — the basis of a monochromatic scheme — while changing the hue is what creates contrast and variety between colours. Keeping these three separate in your head is the whole reason HSL, HWB and the LCH-style spaces exist.

The classic harmonies are named by their geometry on the wheel. Complementary uses two opposite hues (180° apart) for maximum contrast and energy — great for a call-to-action against a background. Analogous uses three neighbours (around ±30°) for a calm, cohesive feel, the way nature often pairs colours. Triadic uses three hues spaced 120° apart for a vibrant yet balanced trio. Split-complementary softens a complementary pair by using the two colours either side of the complement; tetradic (a rectangle) and square schemes use four hues for the richest, hardest-to-balance palettes. This converter generates all six from any base colour, plus monochromatic, tint and shade ramps, so you can audition each relationship at a glance.

Temperature ties it together. Warm colours — reds, oranges, yellows — feel energetic and advance towards the viewer; cool colours — greens, blues, purples — feel calm and recede. A composition usually reads best with a dominant temperature and a smaller accent from the other side of the wheel, which is essentially the complementary harmony at work. The practical takeaway is that you rarely need to invent colours from scratch: pick one base you like, choose a harmony that matches the mood you want — calm analogous, punchy complementary, balanced triadic — then refine lightness and saturation until the set sings. The harmony generator turns that into a one-click exercise, and the contrast and colour-blindness tools then tell you whether the result is actually usable, not just pretty.

Colour accessibility is mostly about one thing: making sure text and meaningful elements stand out enough from their background that everyone can read them, including people with low vision or colour-vision deficiencies. The measure for this is contrast ratio, a number from 1:1 (two identical colours) to 21:1 (pure black on pure white). The Web Content Accessibility Guidelines (WCAG) set minimum ratios that text and UI must meet, and the Contrast tab in this tool computes the exact ratio for any foreground/background pair and tells you which levels it passes or fails.

The thresholds depend on the conformance level and the size of the text. At level AA, normal body text needs at least 4.5:1, while large text — 24px and up, or 18.66px and up if bold — needs only 3:1 because bigger glyphs are easier to read at lower contrast. The same 3:1 minimum applies to UI components and meaningful graphics like icons and form borders. The stricter AAA level raises normal text to 7:1 and large text to 4.5:1. Aim for AA as a baseline and AAA where you can, especially for long-form reading.

The maths behind the ratio is worth understanding because it explains why some pairs surprise you. Contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colour. Relative luminance linearises each sRGB channel — undoing the gamma curve — then weights them 0.2126 R + 0.7152 G + 0.0722 B. Green dominates that sum because the human eye is far more sensitive to green light than to red or blue, which is why a mid-green can carry more apparent brightness than a mid-blue at the same HSL lightness. The practical consequence is that contrast is driven by luminance, not hue: to fix a failing pair you almost always adjust lightness, not the colour itself.

Contrast is necessary but not sufficient, because around 1 in 12 men and 1 in 200 women have a colour-vision deficiency. Two colours can have plenty of contrast yet become indistinguishable to someone who is red-blind. That is what the colour-blindness simulator is for: it re-renders your colour and palette as they appear under protanopia, deuteranopia, tritanopia and full achromatopsia, so you can catch a pairing that collapses. The golden rule is never to rely on hue alone to convey meaning — pair colour with a label, an icon, a pattern or a clear difference in lightness — so the information survives whatever the viewer can or cannot see. Run candidate pairs through the Contrast tab and the simulator together, adjusting lightness until both pass.

A brand colouris one of the fastest-acting signals a product has — people form an impression from colour before they read a word — so choosing it deliberately matters. The goal is not to find a “pretty” colour in the abstract but one whose associations match the personality you want to project and whose practical behaviour — in light and dark, large and small, across the colour-blind spectrum — holds up in a real interface. That means starting from meaning and industry, then engineering a system around the chosen hue rather than dropping a single swatch into the design and hoping.

Industry conventions exist because they work, and it pays to know them even if you choose to break them. Blue dominates finance, technology and healthcare because it reads as trustworthy, stable and competent — which is why so many banks and SaaS products converge on it. Green signals growth, health, nature and money, the natural choice for wellness, sustainability and fintech alike. Red is energy, urgency and appetite, common in food, entertainment and clearance sales. Purple suggests luxury, creativity and imagination; orange is friendly, affordable and energetic; black reads as premium and sophisticated. None of this is a law — it is a starting hypothesis you can lean into for instant recognition or subvert for deliberate contrast.

A brand colour is never used alone; it anchors a system of three roles. The primary is your signature hue, the one people remember, used for the most important actions and identity moments. An accent — usually a complementary or analogous hue from the harmony tools — provides contrast for highlights and secondary actions without competing with the primary. A set of neutrals — greys, often very slightly tinted toward the primary so they feel cohesive rather than dead — carries the vast majority of the interface: text, borders, backgrounds and surfaces. Most of the screen is neutral; the brand colour earns its impact precisely by being used sparingly, which is the logic behind the classic 60-30-10 ratio.

The emotional perception of a colour is also shaped by its execution, not just its hue. A desaturated, muted teal feels mature and calm; the same hue at full saturation feels energetic and young. Lightness changes register too — a deep, dark version reads as serious and premium, a pale tint as soft and approachable. So the recommended workflow is to pick a hue whose psychology fits, then tune its saturation and lightness for the exact tone you want, then immediately stress-test it: generate the full scale, check that text on your primary passes contrast, and view the palette under colour-blindness simulation before you commit. A brand colour that looks great in isolation but fails at 4.5:1 or vanishes for deuteranopes is not finished — and this tool is built to catch that before launch.

In a design system, colour stops being a handful of hex codes scattered through stylesheets and becomes a structured, named resource. The unit of that structure is the design token: a named, reusable value such as color.primary.500 = #10b981 that captures a design decision once and is then consumed everywhere — in CSS, Tailwind, Figma and native apps. Tokens are what keep colour consistent across platforms and turn a rebrand from a find-and-replace nightmare into a one-place edit. This tool exports your palette as exactly these — CSS variables, SCSS, Tailwind config and JSON tokens — so the colours you generate drop straight into a real system.

The backbone of a colour system is the scale: a single hue expressed as a ramp of stepped lightness, conventionally numbered 50 (almost white) through 500 (the base) to 950 (almost black). Eleven steps give you a tint for subtle backgrounds, a mid value for borders, the base for primary actions and progressively darker shades for text and hover states — all guaranteed to belong to the same family because they share a hue. You build one such scale for your primary, one for an accent, and one for a neutral grey, and suddenly every colour decision in the product is a choice among named steps rather than a fresh hex code. This converter generates that full 50–950 ramp from any base colour automatically.

On top of the raw scales sit semantic colours — tokens named for their role rather than their value. Instead of asking a developer to remember that success is green.500, the system exposes color.success, color.warning, color.danger and color.info, each pointing at a step in a scale. The power of this indirection is theming: color.text.primary can resolve to a dark neutral in light mode and a light one in dark mode without a single component needing to know. Semantic tokens are the layer that lets one component library serve many brands and modes from the same code.

Delivery is where tokens meet your codebase, and the format depends on your stack. CSS custom properties declared on :root — --brand-500: #10b981; — are the universal option: they cascade, they are live in the browser, and you override them inside a .dark block to theme. Tailwind wants a theme.extend.colors object so the steps become utilities like bg-brand-500. SCSS wants $brand-500 variables for build-time use, and JSON tokens feed design-tool plugins and cross-platform pipelines. Because this tool exports all four from the same palette, you generate your colours once and ship them in whatever shape your project expects — no manual transcription, no drift between what the designer chose and what the code uses.

Tailwind CSS popularised a particular shape of colour palette that has since become a near-universal convention: every colour is a named ramp of eleven steps — 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 — going from the lightest tint to the darkest shade of one hue. You reference a step as a utility class such as bg-emerald-500 or text-slate-700, and the consistency of the numbering across every colour is what makes Tailwind palettes so quick to design with: 500 is always the base, 50 always the subtle background, 950 always the near-black.

The logic of the scale is mostly lightness. The hue stays roughly constant down the ramp while lightness steps from very light at 50 to very dark at 950, with saturation nudged slightly at the extremes so the lightest and darkest steps do not look washed out or muddy. Good ramps are not linear in raw lightness — they are spaced so each step looks like an even perceptual jump from the last, which is precisely the problem the OK colour spaces solve, and why a perceptually-aware generator produces a smoother, more usable scale than naive HSL stepping. The mid steps carry the most chroma; the ends trade some saturation for a clean tint and a deep shade.

To add your own brand colour to Tailwind you extend the theme. The Tailwind scale generator in this tool turns any base colour into a complete 50–950 ramp and exports a ready-to-paste theme.extend.colors block, so a custom brand colour becomes a first-class set of utilities. You drop the generated object under theme.extend.colors in your config, give it a name like brand, and immediately get bg-brand-50 through bg-brand-950across backgrounds, text, borders and rings — fully integrated with the rest of Tailwind's system rather than bolted on as one-off hex values.

A few habits make custom Tailwind palettes hold up. Keep 500 as the recognisable base of your brand so it matches the mental model of the built-in colours. Make sure adjacent steps are visually distinct but not jarring, and that the dark end goes deep enough to serve as readable text on a light tint. Verify the pairs you actually use — brand-700 text on a brand-50 background, white text on brand-500— against WCAG contrast, because a beautiful ramp is still broken if its common pairings fail. And because Tailwind's JIT only emits the utilities your markup uses, a custom scale adds almost nothing to your bundle. Generate the ramp here, paste it into your config, run the pairs through the Contrast tab, and your brand colour is production-ready.

Google's Material Design approaches colour as a system of tonal palettes rather than fixed swatches. From a single seed colour, Material derives a ramp of tones — historically labelled in steps such as 50 through 900, and in Material 3 expressed as tones from 0 (black) to 100 (white) — that share a hue but span the full lightness range. The whole interface then draws its colours from these tones, which keeps everything visually related and makes generating both light and dark themes a matter of selecting different tones from the same palette rather than hand-picking new colours.

The system organises those tones into roles. A primary colour carries the main brand identity and the most prominent components; a secondary (and in Material 3, a tertiary) provides accents and supporting emphasis; and a family of surfaceand background tones — usually low-chroma neutrals subtly tinted toward the primary — form the canvas that everything sits on. Each role also defines an “on” colour (the colour of text and icons placed on top of it) chosen to meet contrast requirements, so legibility is built into the palette rather than checked after the fact.

A distinctive Material idea is elevation through tint. Rather than showing depth only with shadows, Material raises a surface's apparent elevation by overlaying a translucent tint of the primary colour — the higher the surface, the stronger the tint — so a raised card or dialog reads as slightly more coloured than the background beneath it. This is why generating consistent tints and shades from a seed matters: the elevation overlays, hover and pressed states, and disabled treatments are all stepped tones of the same colour. The monochromatic, tint and shade ramps in this tool produce exactly that kind of stepped tonal set from your seed.

To build a Material-style palette here, take your brand colour as the seed and generate its scale and tonal ramps; pick a base tone for the primary, lighter tones for surfaces and containers, and darker tones for text and high-emphasis elements. Choose a second hue for your secondary or accent — a harmony from the wheel works well — and run it through the same process. Then export the whole set as design tokens so it slots into a Material theming setup, and verify the “on” pairings against contrast thresholds. Because Material theming is fundamentally about deriving many tones from few seeds, a converter that turns one colour into a full, perceptually-sensible tonal palette and exports it as tokens does most of the heavy lifting for you.

Colour psychologyis the study of how hues influence perception, mood and behaviour. The associations are partly biological and partly learned, but they are consistent enough to be useful: choosing the right colour can make an interface feel calm or urgent, a brand feel premium or playful, a button feel safe or dangerous — all before a single word is read. None of these meanings are absolute laws, but as a designer's starting point they reliably shape first impressions, which is why marketers obsess over them.

Each hue carries a cluster of associations. Red is energy, passion, urgency and appetite — it raises attention and works for alerts, sales and food, but overused it reads as aggressive or error. Blue is trust, calm, stability and competence, the most universally liked colour and the default for finance, tech and healthcare. Greenmeans growth, health, nature, money and “go” — calming and positive, ideal for wellness, finance and success states. Yellow is optimism, warmth and attention, cheerful in small doses but tiring in large ones. Orange blends red's energy with yellow's friendliness — approachable, affordable, enthusiastic. Purple signals luxury, creativity, wisdom and imagination, long tied to royalty. Black is sophistication, power and elegance; white is cleanliness, simplicity and space.

These meanings are also cultural and contextual, and ignoring that is a classic mistake. White signifies purity and weddings in much of the West but mourning in parts of East Asia; red is luck and celebration in China yet danger or debt elsewhere; green carries religious significance in some cultures and money in others. Context within a single design matters just as much: red on a delete button means danger, but the same red on a festive banner means celebration. So colour psychology is a guide to likely first impressions for a given audience, not a guarantee — always weigh it against who will see the colour and where, and against the surrounding cues that frame its meaning. Saturation and lightness shift the feeling too: a soft pastel blue and a deep navy share a hue but project very different moods, the first gentle and the second authoritative.

Used well, colour psychology turns an arbitrary choice into a strategic one — pick the hue whose meaning matches your message, tune its tone for the exact mood, and validate that it works for everyone. That last step is where this tool earns its place. It converts any colour across HEX, RGB, HSL, HSV, HWB, CMYK, LAB, LCH, OKLab and OKLCH plus the nearest named colour; it gives you a pro colour picker with a screen eyedropper; it generates palettes and harmonies, a full Tailwind 50–950 scale and CSS gradients; it checks WCAG contrast, simulates colour blindness, and exports the result as design tokens in CSS, SCSS, Tailwind and JSON. Everything runs 100% client-side and private — no uploads, no sign-up, no limits — so you can take a colour from psychological intent all the way to production-ready, accessible tokens without it ever leaving your browser.