Dune to Rising Star Color Palette

About this palette

Dune to Rising Star is a 5-color pastel, light, warm palette: #DAC0A7 (Dune), #AFDDBC (Big Spender), #FFCEE2 (Light Pink), #FFDCBB (Peach Puff), #F3FBD7 (Rising Star). It mixes orange, green, pink, white tones and feels warm overall. The strongest text pairing is #DAC0A7 on #F3FBD7 with a contrast ratio of 1.62:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dune	rgb(218, 192, 167)	hsl(29, 41%, 75%)
Big Spender	rgb(175, 221, 188)	hsl(137, 40%, 78%)
Light Pink	rgb(255, 206, 226)	hsl(336, 100%, 90%)
Peach Puff	rgb(255, 220, 187)	hsl(29, 100%, 87%)
Rising Star	rgb(243, 251, 215)	hsl(73, 82%, 91%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Color blindness preview

CSS variables

/* Dune to Rising Star — https://swatchly.xyz/palette/dac0a7-afddbc-ffcee2-ffdcbb-f3fbd7 */
:root {
  --dune: #dac0a7;
  --big-spender: #afddbc;
  --light-pink: #ffcee2;
  --peach-puff: #ffdcbb;
  --rising-star: #f3fbd7;
}

Tailwind CSS v4

/* Dune to Rising Star — https://swatchly.xyz/palette/dac0a7-afddbc-ffcee2-ffdcbb-f3fbd7 */
@theme {
  --color-dune: #dac0a7;
  --color-dune-50: #fff6ed;
  --color-dune-100: #fbebdc;
  --color-dune-200: #ebd7c5;
  --color-dune-300: #dac0a7;
  --color-dune-400: #b8a089;
  --color-dune-500: #9c846c;
  --color-dune-600: #806952;
  --color-dune-700: #67523e;
  --color-dune-800: #513f2d;
  --color-dune-900: #3f3020;
  --color-dune-950: #281d12;
  --color-big-spender: #afddbc;
  --color-big-spender-50: #ddf8e4;
  --color-big-spender-100: #cfeed7;
  --color-big-spender-200: #afddbc;
  --color-big-spender-300: #9ec6aa;
  --color-big-spender-400: #7ea98a;
  --color-big-spender-500: #638f70;
  --color-big-spender-600: #4b7558;
  --color-big-spender-700: #385e44;
  --color-big-spender-800: #294b34;
  --color-big-spender-900: #1d3a27;
  --color-big-spender-950: #102417;
  --color-light-pink: #ffcee2;
  --color-light-pink-50: #fff7fa;
  --color-light-pink-100: #ffeaf2;
  --color-light-pink-200: #ffcee2;
  --color-light-pink-300: #e1b9c9;
  --color-light-pink-400: #c397a9;
  --color-light-pink-500: #a77a8d;
  --color-light-pink-600: #895f71;
  --color-light-pink-700: #6f4959;
  --color-light-pink-800: #583745;
  --color-light-pink-900: #452935;
  --color-light-pink-950: #2c1821;
  --color-peach-puff: #ffdcbb;
  --color-peach-puff-50: #ffead7;
  --color-peach-puff-100: #ffdcbb;
  --color-peach-puff-200: #e6cbb2;
  --color-peach-puff-300: #d3b69a;
  --color-peach-puff-400: #b79779;
  --color-peach-puff-500: #9c7d5e;
  --color-peach-puff-600: #826447;
  --color-peach-puff-700: #6a4f34;
  --color-peach-puff-800: #543d25;
  --color-peach-puff-900: #422e1a;
  --color-peach-puff-950: #2a1c0d;
  --color-rising-star: #f3fbd7;
  --color-rising-star-50: #f3fbd7;
  --color-rising-star-100: #eaefd9;
  --color-rising-star-200: #d6dcc2;
  --color-rising-star-300: #bfc5a8;
  --color-rising-star-400: #9fa686;
  --color-rising-star-500: #848a6a;
  --color-rising-star-600: #697051;
  --color-rising-star-700: #53593d;
  --color-rising-star-800: #40452d;
  --color-rising-star-900: #313520;
  --color-rising-star-950: #1e2112;
}