Start generating

Lunatic Lynx to Endless Horizon color palette

DDAB87Lunatic Lynx63A5C2Surgical0D4864Seafarer7D5231Chocolate Bells976C52LeatherB0DCF5Endless Horizon
Open in generator Export PNG, PDF, ASE…

About this palette

Lunatic Lynx to Endless Horizon is a 6-color vintage palette: #DDAB87 (Lunatic Lynx), #63A5C2 (Surgical), #0D4864 (Seafarer), #7D5231 (Chocolate Bells), #976C52 (Leather), #B0DCF5 (Endless Horizon). It mixes orange, blue, brown tones and feels balanced overall. The strongest text pairing is #0D4864 on #B0DCF5 with a contrast ratio of 6.77:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Lunatic Lynxrgb(221, 171, 135)hsl(25, 56%, 70%)
Surgicalrgb(99, 165, 194)hsl(198, 44%, 57%)
Seafarerrgb(13, 72, 100)hsl(199, 77%, 22%)
Chocolate Bellsrgb(125, 82, 49)hsl(26, 44%, 34%)
Leatherrgb(151, 108, 82)hsl(23, 30%, 46%)
Endless Horizonrgb(176, 220, 245)hsl(202, 78%, 83%)

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.

  • Aa6.77:1 Good#0D4864 on #B0DCF5
  • Aa6.77:1 Good#B0DCF5 on #0D4864
  • Aa4.82:1 Good#DDAB87 on #0D4864
  • Aa4.82:1 Good#0D4864 on #DDAB87
  • Aa4.61:1 Good#7D5231 on #B0DCF5
  • Aa4.61:1 Good#B0DCF5 on #7D5231
  • Aa3.61:1 Poor#63A5C2 on #0D4864
  • Aa3.61:1 Poor#0D4864 on #63A5C2

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Lunatic Lynx to Endless Horizon — https://swatchly.xyz/palette/ddab87-63a5c2-0d4864-7d5231-976c52-b0dcf5 */
:root {
  --lunatic-lynx: #ddab87;
  --surgical: #63a5c2;
  --seafarer: #0d4864;
  --chocolate-bells: #7d5231;
  --leather: #976c52;
  --endless-horizon: #b0dcf5;
}

Tailwind CSS v4

/* Lunatic Lynx to Endless Horizon — https://swatchly.xyz/palette/ddab87-63a5c2-0d4864-7d5231-976c52-b0dcf5 */
@theme {
  --color-lunatic-lynx: #ddab87;
  --color-lunatic-lynx-50: #ffecde;
  --color-lunatic-lynx-100: #ffddc5;
  --color-lunatic-lynx-200: #eec6a9;
  --color-lunatic-lynx-300: #ddab87;
  --color-lunatic-lynx-400: #bd8e6c;
  --color-lunatic-lynx-500: #a37452;
  --color-lunatic-lynx-600: #885c3b;
  --color-lunatic-lynx-700: #6f482a;
  --color-lunatic-lynx-800: #5a381d;
  --color-lunatic-lynx-900: #482b13;
  --color-lunatic-lynx-950: #2f1909;
  --color-surgical: #63a5c2;
  --color-surgical-50: #e4f6ff;
  --color-surgical-100: #cbeeff;
  --color-surgical-200: #a9dcf3;
  --color-surgical-300: #8bc5df;
  --color-surgical-400: #63a5c2;
  --color-surgical-500: #488aa7;
  --color-surgical-600: #2f708b;
  --color-surgical-700: #1c5a72;
  --color-surgical-800: #0e475c;
  --color-surgical-900: #053749;
  --color-surgical-950: #012330;
  --color-seafarer: #0d4864;
  --color-seafarer-50: #ebf7ff;
  --color-seafarer-100: #d6efff;
  --color-seafarer-200: #b5def7;
  --color-seafarer-300: #99c8e4;
  --color-seafarer-400: #75a9c8;
  --color-seafarer-500: #588ead;
  --color-seafarer-600: #3e7390;
  --color-seafarer-700: #2a5b76;
  --color-seafarer-800: #0d4864;
  --color-seafarer-900: #11374b;
  --color-seafarer-950: #072230;
  --color-chocolate-bells: #7d5231;
  --color-chocolate-bells-50: #fff2ea;
  --color-chocolate-bells-100: #ffe6d4;
  --color-chocolate-bells-200: #f6d1b7;
  --color-chocolate-bells-300: #e4ba9d;
  --color-chocolate-bells-400: #c99b7a;
  --color-chocolate-bells-500: #af815f;
  --color-chocolate-bells-600: #946846;
  --color-chocolate-bells-700: #7d5231;
  --color-chocolate-bells-800: #633f23;
  --color-chocolate-bells-900: #4e2f17;
  --color-chocolate-bells-950: #331d0b;
  --color-leather: #976c52;
  --color-leather-50: #fff2eb;
  --color-leather-100: #ffe8db;
  --color-leather-200: #f7d4bf;
  --color-leather-300: #e5bea7;
  --color-leather-400: #ca9f85;
  --color-leather-500: #b1856a;
  --color-leather-600: #976c52;
  --color-leather-700: #7b543c;
  --color-leather-800: #63402b;
  --color-leather-900: #4d301e;
  --color-leather-950: #321d0f;
  --color-endless-horizon: #b0dcf5;
  --color-endless-horizon-50: #e7f6ff;
  --color-endless-horizon-100: #d2eefe;
  --color-endless-horizon-200: #b0dcf5;
  --color-endless-horizon-300: #a0c5da;
  --color-endless-horizon-400: #7ea6bd;
  --color-endless-horizon-500: #628ba2;
  --color-endless-horizon-600: #497187;
  --color-endless-horizon-700: #355a6e;
  --color-endless-horizon-800: #264758;
  --color-endless-horizon-900: #1b3745;
  --color-endless-horizon-950: #0e222c;
}

Similar palettes