Shades & Tints Generator

Carolina Blue Step 500 Your color keeps its exact value at step 500, where its lightness naturally falls. The other ten steps are built around it.

Carolina Blue

Step 500 · your color

On white 3.19:1 AA Large On black 6.56:1 AA

HEX#3399CC

RGBrgb(51, 153, 204)

HSLhsl(200, 60%, 50%)

CMYKcmyk(75%, 25%, 0%, 20%)

Send to Color Wheel Contrast Checker

Tints mixed with white

Shades mixed with black

Tones mixed with gray

Click any swatch to see its codes and contrast. Tints, shades and tones are simple RGB mixes, the classic way painters and print designers make them.

Contrast on swatchesEach step shows its best text color level and ratio ON

:root {
  --brand-50: #f2f8fb;
  --brand-100: #deedf6;
  --brand-200: #bfdef1;
  --brand-300: #8fcbef;
  --brand-400: #46b1e9;
  --brand-500: #3399cc;
  --brand-600: #297ea9;
  --brand-700: #26688a;
  --brand-800: #24536d;
  --brand-900: #204356;
  --brand-950: #152935;
}

Next: blend 50 into 950 in the Gradient Generator, test every pair in the Accessible Color Palette, check 900 on 100 with the Contrast Checker or find matching colors on the Color Wheel.

Adobe ASE · 11 colorsMeasuring the file size...

How to make shades and tints of a color

Enter a color. Paste a HEX, RGB or HSL code, type a color name, or use the color picker. Random gives you a surprise.

Read the scale. Your color is pinned at its natural step and ten more steps from 50 to 950 are built around it, evenly spaced in OKLCH lightness.

Pick a swatch. Click any step, tint, shade or tone to see its HEX, RGB, HSL, OKLCH and CMYK codes and its contrast on white and black.

Copy or export. Copy the CSS, Tailwind, SCSS or JSON code, or download the colors as ASE, ACO, Procreate, Figma, GIMP, PNG or SVG.

Got a logo or brand color in an image? Pick its exact code with the Image Color Picker first.

Tints, shades and tones

Tints

Your color mixed with white. Lighter and airier - great for backgrounds, cards and hover states.

Shades

Your color mixed with black. Deeper and heavier - use them for text, borders and pressed states.

Tones

Your color mixed with gray. Softer and more muted - perfect for calm, grown-up palettes.

Simple mixes like these change saturation as they go, so the steps don't always look even. That's what the 50-950 scale fixes.

How the 50-950 scale works

The scale uses OKLCH, a color space where equal lightness steps look equal to the eye. Each of the 11 steps has a target lightness, from almost white at 50 to almost black at 950.

Your color is never changed. It goes to the step closest to its own lightness, and the lighter and darker steps are spread evenly on either side. Saturation follows your color, so a pastel stays soft and a vivid color stays vivid.

50-200: backgrounds, cards and subtle fills.

300-500: borders, icons, buttons and charts.

600-950: text, headings and dark-mode surfaces.

Blend the lightest and darkest steps into a background with the Gradient Generator, or test the text pairs in the Contrast Checker.

Frequently Asked Questions

A tint is a color mixed with white, so it gets lighter. A shade is mixed with black, so it gets darker. A tone is mixed with gray, so it gets softer and less saturated.

The generator shows all three rows for your color, with as many steps as you like.

It is the numbering popularized by Tailwind CSS: 50 is the lightest step, 950 the darkest and 500 sits in the middle. Each number is one shade of the same color, so blue-100 is a pale background and blue-900 a dark text color.

Design systems use these scales so every color has the same set of light and dark versions.

Your color keeps its exact value and goes to the step where its lightness naturally falls - a pale pink lands around 200, a navy around 950. That keeps the steps evenly spaced.

If your design system needs the brand color at 500, open Base position and pick 500 - the scale then stretches around it.

HSL lightness is not how our eyes see it: a yellow and a blue at the same HSL lightness look completely different. OKLCH lightness is designed to match perception, so steps that are evenly spaced in OKLCH also look evenly spaced.

That is also why a modern scale keeps text contrast predictable - 700 on 50 reads about as well for blue as it does for orange.

Open the Tailwind tab in the code box, type your own name under Name in code (for example brand) and click Copy. The code includes a v4 @theme block and a v3 tailwind.config.js snippet - then use classes like bg-brand-500.

Yes. Open Export, pick Adobe ASE (Photoshop, Illustrator, InDesign), Photoshop ACO, Procreate swatches, Figma variables or GIMP palette and click Download. Choose Everything to include the tints, shades and tones too.

The real file size is shown before you download.

Every step shows its best text color with the WCAG level and contrast ratio. Click a swatch for exact ratios on white and black, then use Send to Contrast Checker to test any text and background pair in the Contrast Checker.

Shades of every color