Chinese New Year to Topiary Green color palette

FF3767Chinese New Year C5B6FFViolet Heaven C4A800Muddy Yellow 009287Green Dynasty 567800Topiary Green

Open in generator Export PNG, PDF, ASE…

About this palette

Chinese New Year to Topiary Green is a 5-color vibrant, cool, neon palette: #FF3767 (Chinese New Year), #C5B6FF (Violet Heaven), #C4A800 (Muddy Yellow), #009287 (Green Dynasty), #567800 (Topiary Green). It mixes red, purple, yellow, turquoise, green tones and feels cool overall. The strongest text pairing is #C5B6FF on #567800 with a contrast ratio of 2.82:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chinese New Year	rgb(255, 55, 103)	hsl(346, 100%, 61%)
Violet Heaven	rgb(197, 182, 255)	hsl(252, 100%, 86%)
Muddy Yellow	rgb(196, 168, 0)	hsl(51, 100%, 38%)
Green Dynasty	rgb(0, 146, 135)	hsl(175, 100%, 29%)
Topiary Green	rgb(86, 120, 0)	hsl(77, 100%, 24%)

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

/* Chinese New Year to Topiary Green — https://swatchly.xyz/palette/ff3767-c5b6ff-c4a800-009287-567800 */
:root {
  --chinese-new-year: #ff3767;
  --violet-heaven: #c5b6ff;
  --muddy-yellow: #c4a800;
  --green-dynasty: #009287;
  --topiary-green: #567800;
}

Tailwind CSS v4

/* Chinese New Year to Topiary Green — https://swatchly.xyz/palette/ff3767-c5b6ff-c4a800-009287-567800 */
@theme {
  --color-chinese-new-year: #ff3767;
  --color-chinese-new-year-50: #fff4f5;
  --color-chinese-new-year-100: #ffe9eb;
  --color-chinese-new-year-200: #ffd0d4;
  --color-chinese-new-year-300: #ffb1b8;
  --color-chinese-new-year-400: #ff7d8e;
  --color-chinese-new-year-500: #ff3767;
  --color-chinese-new-year-600: #d9004d;
  --color-chinese-new-year-700: #ad003c;
  --color-chinese-new-year-800: #88002d;
  --color-chinese-new-year-900: #6a0021;
  --color-chinese-new-year-950: #440012;
  --color-violet-heaven: #c5b6ff;
  --color-violet-heaven-50: #f6f4ff;
  --color-violet-heaven-100: #ede9ff;
  --color-violet-heaven-200: #dad2ff;
  --color-violet-heaven-300: #c5b6ff;
  --color-violet-heaven-400: #a597db;
  --color-violet-heaven-500: #8a7bbf;
  --color-violet-heaven-600: #6f60a1;
  --color-violet-heaven-700: #594a85;
  --color-violet-heaven-800: #45386c;
  --color-violet-heaven-900: #352a56;
  --color-violet-heaven-950: #211938;
  --color-muddy-yellow: #c4a800;
  --color-muddy-yellow-50: #fff9db;
  --color-muddy-yellow-100: #fff0ae;
  --color-muddy-yellow-200: #f0dd88;
  --color-muddy-yellow-300: #dec862;
  --color-muddy-yellow-400: #c4a800;
  --color-muddy-yellow-500: #a38b00;
  --color-muddy-yellow-600: #837000;
  --color-muddy-yellow-700: #685800;
  --color-muddy-yellow-800: #514400;
  --color-muddy-yellow-900: #3e3300;
  --color-muddy-yellow-950: #261f00;
  --color-green-dynasty: #009287;
  --color-green-dynasty-50: #d0fff8;
  --color-green-dynasty-100: #b6f7ee;
  --color-green-dynasty-200: #95e5da;
  --color-green-dynasty-300: #71cfc3;
  --color-green-dynasty-400: #3fafa3;
  --color-green-dynasty-500: #009287;
  --color-green-dynasty-600: #00766d;
  --color-green-dynasty-700: #005e56;
  --color-green-dynasty-800: #004a44;
  --color-green-dynasty-900: #003934;
  --color-green-dynasty-950: #002421;
  --color-topiary-green: #567800;
  --color-topiary-green-50: #e8ffca;
  --color-topiary-green-100: #dcf6b9;
  --color-topiary-green-200: #c6e49b;
  --color-topiary-green-300: #adce7b;
  --color-topiary-green-400: #8baf50;
  --color-topiary-green-500: #70942d;
  --color-topiary-green-600: #567800;
  --color-topiary-green-700: #435f00;
  --color-topiary-green-800: #344a00;
  --color-topiary-green-900: #273900;
  --color-topiary-green-950: #172400;
}