What is a pastel color?

A color with high lightness and low saturation, a hue softened by adding white, or more precisely one whose chroma is deliberately held down. The pastels here sit between 70% and 95% HSL lightness. What separates a pastel from a plain tint is that the hue stays identifiable.

What colors go well with pastels?

Other pastels of a similar lightness, which is why analogous and monochrome schemes dominate here. For contrast, pair a pastel field with one deep accent from the same hue family rather than a second bright color.

Are pastel colors accessible?

Not on their own. Pastels score around 1.4:1 against white, far below the 4.5:1 WCAG AA needs for normal text. They work as backgrounds, not as text or small UI elements. Dark text on a pastel background is fine.

Are these pastel palettes free to use?

Yes, for anything, including commercial and client work, with no attribution required. Colors cannot be owned: a palette is four numbers.

Pastel color palettes and soft color schemes

Palettes built around pastel. Click any swatch to copy its hex code.

Pastel colors are soft, light and low in saturation, the pale pinks, mints and lilacs that make an interface feel calm rather than loud. Every pastel palette below is four such shades chosen to sit together, with hex codes ready to copy.

Pastel color values

#FACCDCrgb(250, 204, 220)

Color spaces of #faccdc
RGB	250	204	220
HSL	339°	82%	89%
HSV	339°	18%	98%
CMYK	0.00	0.18	0.12	0.02
XYZ	73.9349	68.6793	77.0581
Yxy	68.6793	0.3366	0.3126
CIE-Lab	86.3450	18.6981	-1.7738
Hunter Lab	82.8730	14.2206	2.8813
OKLCH	88.9%	0.056	355.4°

#FACCDC is 250 red, 204 green and 220 blue. Its red channel carries the most of it. The nearest of the 216 web safe colors is #FFCCCC.

CIE-Lab, XYZ and Yxy are measured against D65, the white point sRGB itself is defined against. Hunter Lab uses the original illuminant C constants, which is what paint and plastics specifications quote, so the two Lab rows are not directly comparable. CMYK is the plain arithmetic conversion: real ink values depend on the press, the paper and the profile.

Base numbers
Base	Red	Green	Blue
Binary	11111010	11001100	11011100
Octal	372	314	334
Decimal	250	204	220
Hex	FA	CC	DC

#faccdc mixed with black

Ten even steps of the classic shade ramp, worked out in RGB, which is how the term has always been defined and how other references list it. The OKLCH scale further down this page answers a different question: it steps by equal perceived amounts, so its values are not the same.

#FACCDC
#E1B7C6
#C8A3B0
#AF8E9A
#967A84
#7D666E
#645158
#4B3D42
#31282B
#181415
#000000

#faccdc mixed with white

The tint ramp, by the same rule in the other direction.

#FACCDC
#FAD1DF
#FBD6E3
#FBDBE6
#FCE0EA
#FCE5ED
#FDEAF1
#FDEFF4
#FEF4F8
#FEF9FB
#FFFFFF

Channel shares

Red37.1%
Green30.3%
Blue32.6%

Color schemes

Turned in OKLCH rather than HSL, so every member keeps the lightness and chroma of the original instead of one of them arriving washed out.

Complementary

#FACCDC
#B5E7D9

Triadic

#FACCDC
#D8E0B6
#B8E1FB

Analogous

#FACCDC
#FECDC8
#EECFEF

Monochromatic

#865E6D
#AB8190
#D2A6B5
#FACCDC
#FFF6F9
#FFF6F9
#FFF6F9

#faccdc on black and on white

The quick brown fox jumps over the lazy dog. 14.74:1

The quick brown fox jumps over the lazy dog. 1.43:1

Body text needs 4.5:1 to meet AA and large text needs 3:1, so a ratio tells you which of the two backgrounds this color can be read on, and at what size.

CSS for #faccdc

color: #faccdc;
background-color: #faccdc;
border: 3px solid #faccdc;
box-shadow: 1px 1px 3px 2px #faccdc;
text-shadow: 4px 4px 2px rgba(250, 204, 220, 0.8);

/* Perceptually even, and what a modern stylesheet wants */
color: oklch(88.9% 0.056 355.4);

The OKLCH form is the same color stated so that lightening or darkening it moves by an amount the eye agrees with. Every current browser understands it.

Named shades and close relatives

What makes a color pastel

A pastel is a hue with the volume turned down: high lightness, low chroma, but never so low that the hue disappears. That last part is what separates a pastel from a plain grey tint, pastel sky still reads as blue.

These palettes are generated in OKLCH rather than HSL, and the pastel preset holds lightness between 0.84 and 0.94 with chroma between 0.035 and 0.075, which lands between 70% and 95% lightness in HSL. The OKLCH corridor is the one that matters: HSL lightness is not perceptually even, so a fixed HSL value gives a yellow that looks washed out beside a blue that still looks strong.

Pastels and contrast

This is where pastel schemes usually go wrong. The shades above score between roughly 1.36:1 and 1.43:1 against white, nowhere near the 4.5:1 WCAG AA requires for normal text, and short of the 3:1 needed for buttons, borders and icons. Pastel text on a white page is not a stylistic risk; it is unreadable for a large number of people.

Used as backgrounds they are excellent. Dark text on a pastel field has room to spare, black on pastel pink measures about 14.7:1. The working rule is pastels behind, dark ink in front, and one deep accent from the same hue family for anything that has to be noticed.

Where pastel palettes work

Wedding stationery, baby and nursery branding, wellness and skincare packaging, spring campaigns, children's books, and the soft empty states common in modern apps. The common thread is content that should feel approachable rather than urgent, which is also why pastels rarely suit an error state or a warning.

Contrast and readability

The contrast checker reports every level for a given pair and suggests the nearest passing shade on the same hue. The color picker builds this same scale from any color you paste in.

Pastel color questions

What is a pastel color?: A color with high lightness and low saturation, a hue softened by adding white, or more precisely one whose chroma is deliberately held down. The pastels here sit between 70% and 95% HSL lightness. What separates a pastel from a plain tint is that the hue stays identifiable.
What colors go well with pastels?: Other pastels of a similar lightness, which is why analogous and monochrome schemes dominate here. For contrast, pair a pastel field with one deep accent from the same hue family rather than a second bright color.
Are pastel colors accessible?: Not on their own. Pastels score around 1.4:1 against white, far below the 4.5:1 WCAG AA needs for normal text. They work as backgrounds, not as text or small UI elements. Dark text on a pastel background is fine.
Are these pastel palettes free to use?: Yes, for anything, including commercial and client work, with no attribution required. Colors cannot be owned: a palette is four numbers.

Related colors: powder blue, wisteria. See every shade on the colors index.

#D9F1E8

#CEEDE6

#BCEEED

#C7EEF2

#CBD2B3

#D8EACF

#D4F1DE

#D1F0EA

#CDE5ED

#B9CFDB

#9CCBF2

#B6CBEB

#BFDCE6

#BED5E8

#CED7E9

#CDCAE2

#D9CFA6

#E2E7C6

#BFE4AB

#B3E2C6

#D3CDE2

#DAD4E9

#DFDBF2

#E7E1FD

#A1CEDA

#7F99AD

#C3D3F7

#D7D3EE

#F0E0E9

#FBE5ED

#D0C1CA

#E8F1EE

#EFDEC4

#CAE6E9

#D8C5EA

#ECE2BC

#B7D9DF

#BBE1E9

#CDE6EC

#CFEFF7

#E8DBF2

#E9DAE7

#CCCFA4

#C9E0D1

#F8DDCC

#AED8CD

#E3E1FB

#F5DEC4

#F8E3F5

#F3D9F3

#EBD0EC

#E2C9E3

#B0BFDC

#D1D2FF

#BFA9E7

#CFBCD2

#D6CEAC

#D6E0BE

#D7E7D3

#C9E4D4

#EDD8D3

#EBDBD0

#E6D6C5

#D5D1C4

#F8F0DC

#F0E6CE

#E3DDC9

#DDD2B9

#E5D1BA

#E6DACC

#F5E0CB

#F6E9DC

#FCDBDD

#FAE4DC

#FAE3D1

#FBEFD5

#F4E7CC

#C8E6E6

#EACFE7

#E3DDC7

#DBD7FB

#E4D5FB

#E6D4F1

#FDE0FB

#F5E2CE

#E9E6DA

#D4D5BC

#E0E8DD

#DADFFF

#E6E3FA

#D7C5DF

#EDDBEA

#EDD9CA

#DBD0C5

#E6DECC

#E0DDD1