Start generating

Orchid to Green Not Found color palette

7C8AFFOrchid985600Mochaccino4E6204Serrano PepperCCD4FFIcy PlainsF7A45AShrimp Cocktail364400Green Not Found
Open in generator Export PNG, PDF, ASE…

About this palette

Orchid to Green Not Found is a 6-color cool, earthy palette: #7C8AFF (Orchid), #985600 (Mochaccino), #4E6204 (Serrano Pepper), #CCD4FF (Icy Plains), #F7A45A (Shrimp Cocktail), #364400 (Green Not Found). It mixes purple, brown, green, orange tones and feels cool overall. The strongest text pairing is #CCD4FF on #364400 with a contrast ratio of 7.27:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Orchidrgb(124, 138, 255)hsl(234, 100%, 74%)
Mochaccinorgb(152, 86, 0)hsl(34, 100%, 30%)
Serrano Pepperrgb(78, 98, 4)hsl(73, 92%, 20%)
Icy Plainsrgb(204, 212, 255)hsl(231, 100%, 90%)
Shrimp Cocktailrgb(247, 164, 90)hsl(28, 91%, 66%)
Green Not Foundrgb(54, 68, 0)hsl(72, 100%, 13%)

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.27:1 Very good#CCD4FF on #364400
  • Aa7.27:1 Very good#364400 on #CCD4FF
  • Aa5.25:1 Good#F7A45A on #364400
  • Aa5.25:1 Good#364400 on #F7A45A
  • Aa4.70:1 Good#4E6204 on #CCD4FF
  • Aa4.70:1 Good#CCD4FF on #4E6204
  • Aa3.94:1 Poor#985600 on #CCD4FF
  • Aa3.94:1 Poor#CCD4FF on #985600

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Orchid to Green Not Found — https://swatchly.xyz/palette/7c8aff-985600-4e6204-ccd4ff-f7a45a-364400 */
:root {
  --orchid: #7c8aff;
  --mochaccino: #985600;
  --serrano-pepper: #4e6204;
  --icy-plains: #ccd4ff;
  --shrimp-cocktail: #f7a45a;
  --green-not-found: #364400;
}

Tailwind CSS v4

/* Orchid to Green Not Found — https://swatchly.xyz/palette/7c8aff-985600-4e6204-ccd4ff-f7a45a-364400 */
@theme {
  --color-orchid: #7c8aff;
  --color-orchid-50: #edf1ff;
  --color-orchid-100: #dee4ff;
  --color-orchid-200: #c3cdff;
  --color-orchid-300: #a4b2ff;
  --color-orchid-400: #7c8aff;
  --color-orchid-500: #646fe2;
  --color-orchid-600: #4e56c2;
  --color-orchid-700: #3d42a4;
  --color-orchid-800: #2f3188;
  --color-orchid-900: #23256f;
  --color-orchid-950: #15164c;
  --color-mochaccino: #985600;
  --color-mochaccino-50: #fff3e8;
  --color-mochaccino-100: #ffe5d0;
  --color-mochaccino-200: #ffcb9d;
  --color-mochaccino-300: #efb079;
  --color-mochaccino-400: #d28e4e;
  --color-mochaccino-500: #b6712c;
  --color-mochaccino-600: #985600;
  --color-mochaccino-700: #794400;
  --color-mochaccino-800: #603400;
  --color-mochaccino-900: #4b2700;
  --color-mochaccino-950: #301700;
  --color-serrano-pepper: #4e6204;
  --color-serrano-pepper-50: #edfdcf;
  --color-serrano-pepper-100: #e3f3c1;
  --color-serrano-pepper-200: #cee2a5;
  --color-serrano-pepper-300: #b7cd88;
  --color-serrano-pepper-400: #98ae61;
  --color-serrano-pepper-500: #7d9342;
  --color-serrano-pepper-600: #647927;
  --color-serrano-pepper-700: #4e6204;
  --color-serrano-pepper-800: #3c4d01;
  --color-serrano-pepper-900: #2e3b00;
  --color-serrano-pepper-950: #1c2500;
  --color-icy-plains: #ccd4ff;
  --color-icy-plains-50: #f2f4ff;
  --color-icy-plains-100: #e5e9ff;
  --color-icy-plains-200: #ccd4ff;
  --color-icy-plains-300: #b7bee2;
  --color-icy-plains-400: #979ec6;
  --color-icy-plains-500: #7c83aa;
  --color-icy-plains-600: #62698e;
  --color-icy-plains-700: #4d5274;
  --color-icy-plains-800: #3b405d;
  --color-icy-plains-900: #2d3149;
  --color-icy-plains-950: #1b1e2f;
  --color-shrimp-cocktail: #f7a45a;
  --color-shrimp-cocktail-50: #ffeee0;
  --color-shrimp-cocktail-100: #ffdfc6;
  --color-shrimp-cocktail-200: #ffc392;
  --color-shrimp-cocktail-300: #f7a45a;
  --color-shrimp-cocktail-400: #d5873e;
  --color-shrimp-cocktail-500: #ba6b17;
  --color-shrimp-cocktail-600: #995500;
  --color-shrimp-cocktail-700: #7b4300;
  --color-shrimp-cocktail-800: #623400;
  --color-shrimp-cocktail-900: #4e2800;
  --color-shrimp-cocktail-950: #321800;
  --color-green-not-found: #364400;
  --color-green-not-found-50: #effbd7;
  --color-green-not-found-100: #e5f2ca;
  --color-green-not-found-200: #d0dfb0;
  --color-green-not-found-300: #b8c892;
  --color-green-not-found-400: #97a86c;
  --color-green-not-found-500: #7a8c4f;
  --color-green-not-found-600: #607035;
  --color-green-not-found-700: #4a5822;
  --color-green-not-found-800: #364400;
  --color-green-not-found-900: #2a340b;
  --color-green-not-found-950: #192004;
}

Similar palettes