Sign Up Sign Up
Beret12

Beret12

12-color palette · Warm · Light · Analogous harmony

Back to Library

Beret12

12-color palette · Warm temperature · Light tone · Analogous harmony

Modify
Vibrant 12 colors Warm Light Analogous
Likes 51
Colors 12

CSS variables

:root {
  --c-vibrant-1: #FEFCF2;
  --c-vibrant-2: #FEE6DD;
  --c-vibrant-3: #FFDFAB;
  --c-vibrant-4: #FFBF8F;
  --c-vibrant-5: #FF8567;
  --c-vibrant-6: #DD4D68;
  --c-vibrant-7: #7B3945;
  --c-vibrant-8: #B18458;
  --c-vibrant-9: #BAA268;
  --c-vibrant-10: #B89FA1;
  --c-vibrant-11: #7684CB;
  --c-vibrant-12: #6BAFE5;
}

About this palette

This 12-color vibrant palette runs from Granulated Sugar (#FEFCF2) as its lightest tone to Cordova Burgundy (#7B3945) as its darkest. It blends Granulated Sugar, French Manicure, Horseradish Yellow, Sunset Cruise, Protein High, Rosy Cheeks, Cordova Burgundy, Cool Copper, Buffalo Hide, Lilac Smoke, Violets Are Blue and Sanctuary Spa into a single set you can drop straight into a UI. Of its 66 color pairings, 4 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #FEFCF2 on #7B3945 at 8.12:1.

A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.

Color breakdown

Granulated Sugar #FEFCF2
RGB
rgb(254, 252, 242)
HSL
hsl(50, 86%, 97%)
Luminance
0.971
French Manicure #FEE6DD
RGB
rgb(254, 230, 221)
HSL
hsl(16, 94%, 93%)
Luminance
0.829
Horseradish Yellow #FFDFAB
RGB
rgb(255, 223, 171)
HSL
hsl(37, 100%, 84%)
Luminance
0.770
Sunset Cruise #FFBF8F
RGB
rgb(255, 191, 143)
HSL
hsl(26, 100%, 78%)
Luminance
0.605
Protein High #FF8567
RGB
rgb(255, 133, 103)
HSL
hsl(12, 100%, 70%)
Luminance
0.390
Rosy Cheeks #DD4D68
RGB
rgb(221, 77, 104)
HSL
hsl(349, 68%, 58%)
Luminance
0.217
Cordova Burgundy #7B3945
RGB
rgb(123, 57, 69)
HSL
hsl(349, 37%, 35%)
Luminance
0.076
Cool Copper #B18458
RGB
rgb(177, 132, 88)
HSL
hsl(30, 36%, 52%)
Luminance
0.266
Buffalo Hide #BAA268
RGB
rgb(186, 162, 104)
HSL
hsl(42, 37%, 57%)
Luminance
0.373
Lilac Smoke #B89FA1
RGB
rgb(184, 159, 161)
HSL
hsl(355, 15%, 67%)
Luminance
0.376
Violets Are Blue #7684CB
RGB
rgb(118, 132, 203)
HSL
hsl(230, 45%, 63%)
Luminance
0.247
Sanctuary Spa #6BAFE5
RGB
rgb(107, 175, 229)
HSL
hsl(207, 70%, 66%)
Luminance
0.394

Contrast & accessibility

4 of 66 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.

Aa #FEFCF2 on #7B3945 8.12:1 AAA
Aa #FEE6DD on #7B3945 6.99:1 AA
Aa #FFDFAB on #7B3945 6.52:1 AA
Aa #FFBF8F on #7B3945 5.21:1 AA
Aa #FEFCF2 on #DD4D68 3.83:1 AA Large
Aa #7B3945 on #6BAFE5 3.54:1 AA Large
Aa #FF8567 on #7B3945 3.50:1 AA Large
Aa #FEFCF2 on #7684CB 3.44:1 AA Large
Aa #7B3945 on #B89FA1 3.39:1 AA Large
Aa #7B3945 on #BAA268 3.36:1 AA Large
Aa #FEE6DD on #DD4D68 3.29:1 AA Large
Aa #FEFCF2 on #B18458 3.24:1 AA Large
Aa #FFDFAB on #DD4D68 3.07:1 AA Large
Aa #FEE6DD on #7684CB 2.96:1 Fail
Aa #FEE6DD on #B18458 2.79:1 Fail
Aa #FFDFAB on #7684CB 2.76:1 Fail
Aa #FFDFAB on #B18458 2.60:1 Fail
Aa #7B3945 on #B18458 2.51:1 Fail
Aa #FFBF8F on #DD4D68 2.46:1 Fail
Aa #FEFCF2 on #BAA268 2.41:1 Fail
Aa #FEFCF2 on #B89FA1 2.40:1 Fail
Aa #7B3945 on #7684CB 2.36:1 Fail
Aa #FEFCF2 on #FF8567 2.32:1 Fail
Aa #FEFCF2 on #6BAFE5 2.30:1 Fail
Aa #FFBF8F on #7684CB 2.21:1 Fail
Aa #DD4D68 on #7B3945 2.12:1 Fail
Aa #FEE6DD on #BAA268 2.08:1 Fail
Aa #FFBF8F on #B18458 2.08:1 Fail
Aa #FEE6DD on #B89FA1 2.06:1 Fail
Aa #FEE6DD on #FF8567 2.00:1 Fail
Aa #FEE6DD on #6BAFE5 1.98:1 Fail
Aa #FFDFAB on #BAA268 1.94:1 Fail
Aa #FFDFAB on #B89FA1 1.93:1 Fail
Aa #FFDFAB on #FF8567 1.86:1 Fail
Aa #FFDFAB on #6BAFE5 1.84:1 Fail
Aa #DD4D68 on #6BAFE5 1.67:1 Fail
Aa #FF8567 on #DD4D68 1.65:1 Fail
Aa #DD4D68 on #B89FA1 1.60:1 Fail
Aa #DD4D68 on #BAA268 1.58:1 Fail
Aa #FEFCF2 on #FFBF8F 1.56:1 Fail
Aa #FFBF8F on #BAA268 1.55:1 Fail
Aa #FFBF8F on #B89FA1 1.54:1 Fail
Aa #7684CB on #6BAFE5 1.50:1 Fail
Aa #FFBF8F on #FF8567 1.49:1 Fail
Aa #FF8567 on #7684CB 1.48:1 Fail
Aa #FFBF8F on #6BAFE5 1.47:1 Fail
Aa #BAA268 on #7684CB 1.43:1 Fail
Aa #B89FA1 on #7684CB 1.43:1 Fail
Aa #B18458 on #6BAFE5 1.41:1 Fail
Aa #FF8567 on #B18458 1.39:1 Fail
Aa #B18458 on #B89FA1 1.35:1 Fail
Aa #FEE6DD on #FFBF8F 1.34:1 Fail
Aa #B18458 on #BAA268 1.34:1 Fail
Aa #FEFCF2 on #FFDFAB 1.25:1 Fail
Aa #FFDFAB on #FFBF8F 1.25:1 Fail
Aa #DD4D68 on #B18458 1.18:1 Fail
Aa #FEFCF2 on #FEE6DD 1.16:1 Fail
Aa #DD4D68 on #7684CB 1.11:1 Fail
Aa #FEE6DD on #FFDFAB 1.07:1 Fail
Aa #B18458 on #7684CB 1.06:1 Fail
Aa #BAA268 on #6BAFE5 1.05:1 Fail
Aa #FF8567 on #BAA268 1.04:1 Fail
Aa #B89FA1 on #6BAFE5 1.04:1 Fail
Aa #FF8567 on #B89FA1 1.03:1 Fail
Aa #FF8567 on #6BAFE5 1.01:1 Fail
Aa #BAA268 on #B89FA1 1.01:1 Fail

Similar palettes

#FFF5E4 #FFE3E1 #FFD1D1 #FF9494
4 colors
#F9F5F6 #F8E8EE #FDCEDF #F2BED1
4 colors
#FFC7C7 #FFE2E2 #F6F6F6 #8785A2
4 colors
#AD8B73 #CEAB93 #E3CAA5 #FFFBE9
4 colors
#F38181 #FCE38A #EAFFD0 #95E1D3
4 colors
#B7C4CF #EEE3CB #D7C0AE #967E76
4 colors
#FFEDDB #EDCDBB #E3B7A0 #BF9270
4 colors
#8D7B68 #A4907C #C8B6A6 #F1DEC9
4 colors