Nugget to Veiling Waterfalls Color Palette

About this palette

Nugget to Veiling Waterfalls is a 5-color cool, vintage palette: #C0901E (Nugget), #004F50 (Cape Verde), #007B81 (Jade Jewel), #ECB1B4 (Deeply Embarrassed), #D6EBFF (Veiling Waterfalls). It mixes yellow, turquoise, pink, blue tones and feels cool overall. The strongest text pairing is #004F50 on #D6EBFF with a contrast ratio of 7.69:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nugget	rgb(192, 144, 30)	hsl(42, 73%, 44%)
Cape Verde	rgb(0, 79, 80)	hsl(181, 100%, 16%)
Jade Jewel	rgb(0, 123, 129)	hsl(183, 100%, 25%)
Deeply Embarrassed	rgb(236, 177, 180)	hsl(357, 61%, 81%)
Veiling Waterfalls	rgb(214, 235, 255)	hsl(209, 100%, 92%)

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.

Aa7.69:1 Very good#004F50 on #D6EBFF
Aa7.69:1 Very good#D6EBFF on #004F50
Aa5.15:1 Good#004F50 on #ECB1B4
Aa5.15:1 Good#ECB1B4 on #004F50
Aa4.14:1 Poor#007B81 on #D6EBFF
Aa4.14:1 Poor#D6EBFF on #007B81
Aa3.24:1 Poor#C0901E on #004F50
Aa3.24:1 Poor#004F50 on #C0901E

Color blindness preview

CSS variables

/* Nugget to Veiling Waterfalls — https://swatchly.xyz/palette/c0901e-004f50-007b81-ecb1b4-d6ebff */
:root {
  --nugget: #c0901e;
  --cape-verde: #004f50;
  --jade-jewel: #007b81;
  --deeply-embarrassed: #ecb1b4;
  --veiling-waterfalls: #d6ebff;
}

Tailwind CSS v4

/* Nugget to Veiling Waterfalls — https://swatchly.xyz/palette/c0901e-004f50-007b81-ecb1b4-d6ebff */
@theme {
  --color-nugget: #c0901e;
  --color-nugget-50: #fff0d5;
  --color-nugget-100: #ffe3ae;
  --color-nugget-200: #f2cc81;
  --color-nugget-300: #deb25b;
  --color-nugget-400: #c0901e;
  --color-nugget-500: #a27700;
  --color-nugget-600: #836000;
  --color-nugget-700: #694c00;
  --color-nugget-800: #533b00;
  --color-nugget-900: #412e00;
  --color-nugget-950: #2b1d00;
  --color-cape-verde: #004f50;
  --color-cape-verde-50: #dafdfd;
  --color-cape-verde-100: #cdf4f4;
  --color-cape-verde-200: #b3e2e2;
  --color-cape-verde-300: #97cdcd;
  --color-cape-verde-400: #72afaf;
  --color-cape-verde-500: #549494;
  --color-cape-verde-600: #3a797a;
  --color-cape-verde-700: #256262;
  --color-cape-verde-800: #004f50;
  --color-cape-verde-900: #0b3c3d;
  --color-cape-verde-950: #042626;
  --color-jade-jewel: #007b81;
  --color-jade-jewel-50: #dafdff;
  --color-jade-jewel-100: #c0f7fa;
  --color-jade-jewel-200: #a3e5e9;
  --color-jade-jewel-300: #83d0d5;
  --color-jade-jewel-400: #57b2b7;
  --color-jade-jewel-500: #33969c;
  --color-jade-jewel-600: #007b81;
  --color-jade-jewel-700: #006267;
  --color-jade-jewel-800: #004c50;
  --color-jade-jewel-900: #003b3e;
  --color-jade-jewel-950: #002527;
  --color-deeply-embarrassed: #ecb1b4;
  --color-deeply-embarrassed-50: #fff3f3;
  --color-deeply-embarrassed-100: #ffe5e6;
  --color-deeply-embarrassed-200: #f9ccce;
  --color-deeply-embarrassed-300: #ecb1b4;
  --color-deeply-embarrassed-400: #c99295;
  --color-deeply-embarrassed-500: #ad767a;
  --color-deeply-embarrassed-600: #905c60;
  --color-deeply-embarrassed-700: #75474a;
  --color-deeply-embarrassed-800: #5e3538;
  --color-deeply-embarrassed-900: #4a272a;
  --color-deeply-embarrassed-950: #2f1719;
  --color-veiling-waterfalls: #d6ebff;
  --color-veiling-waterfalls-50: #e9f4ff;
  --color-veiling-waterfalls-100: #d6ebff;
  --color-veiling-waterfalls-200: #c8d7e6;
  --color-veiling-waterfalls-300: #b0c1d2;
  --color-veiling-waterfalls-400: #90a3b5;
  --color-veiling-waterfalls-500: #75889a;
  --color-veiling-waterfalls-600: #5c6e7f;
  --color-veiling-waterfalls-700: #475767;
  --color-veiling-waterfalls-800: #364452;
  --color-veiling-waterfalls-900: #283440;
  --color-veiling-waterfalls-950: #182028;
}