← Back to Editor

#DADE75 · #54BE9F · #287E9C · #196B62 · #2D3000

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#DADE75

Fresh Green · Khaki · Sunflower

HEX
#DADE75
RGB
rgb(218, 222, 117)
HSL
hsl(62, 61%, 66%)
HSB
hsb(62, 47%, 87%)
CMYK
cmyk(2%, 0%, 47%, 13%)
Oklch
oklch(87.6% 0.129 110.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#54BE9F

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#54BE9F
RGB
rgb(84, 190, 159)
HSL
hsl(162, 45%, 54%)
HSB
hsb(162, 56%, 75%)
CMYK
cmyk(56%, 0%, 16%, 25%)
Oklch
oklch(73.0% 0.109 171.3)

Traditional「Mineral Blue」· Paint「Lake Green」· Creative Blush Sunrise

#287E9C

Lake Blue · SteelBlue · Mint Ice

HEX
#287E9C
RGB
rgb(40, 126, 156)
HSL
hsl(196, 59%, 38%)
HSB
hsb(196, 74%, 61%)
CMYK
cmyk(74%, 19%, 0%, 39%)
Oklch
oklch(55.6% 0.092 225.7)

Traditional「Lake Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#196B62

Mineral Blue · SeaGreen · Mint Ice

HEX
#196B62
RGB
rgb(25, 107, 98)
HSL
hsl(173, 62%, 26%)
HSB
hsb(173, 77%, 42%)
CMYK
cmyk(77%, 0%, 8%, 58%)
Oklch
oklch(47.8% 0.077 184.1)

Traditional「Mineral Blue」· Paint「Mint Ice」· Creative Blush Sunrise

#2D3000

Autumn Sage · Black · Amber Gold

HEX
#2D3000
RGB
rgb(45, 48, 0)
HSL
hsl(64, 100%, 9%)
HSB
hsb(64, 100%, 19%)
CMYK
cmyk(6%, 0%, 100%, 81%)
Oklch
oklch(29.6% 0.066 113.5)

Traditional「Autumn Sage」· Paint「Amber Gold」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

DADE75
7773DD

Analogous

DDAC73
DADE75
A5DD73

Triadic

DADE75
73DADD
DD73DA

Split-Comp.

DADE75
73A5DD
AC73DD

Tetradic

DADE75
73DDAC
7773DD
DD73A5

Contrast Matrix WCAG 2.1 Contrast

DADE75
54BE9F
287E9C
196B62
2D3000
—
1.6
Fail
3.2
AA Large
4.4
AA Large
9.6
AAA
1.6
Fail
—
2.0
Fail
2.8
Fail
6.0
AA
3.2
AA Large
2.0
Fail
—
1.4
Fail
3.0
Fail
4.4
AA Large
2.8
Fail
1.4
Fail
—
2.2
Fail
9.6
AAA
6.0
AA
3.0
Fail
2.2
Fail
—
White BG
1.4Fail
2.3Fail
4.6AA
6.3AA
13.7AAA
Black BG
14.7AAA
9.2AAA
4.6AA
3.3AA Large
1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDC8E
8283A7
4D4E95
3D3D64
2E2E0C

Deuteranopia

DCDB95
7C74A8
484293
383265
2E2E0E

Tritanopia

DAA2A7
59ACAE
2C8F8E
1D6666
2D1517

Achromatopsia

D1D1D1
9B9B9B
686868
515151
2A2A2A

Shades & Tints Shades & Tints

#DADE75

Dark
Light

#54BE9F

Dark
Light

#287E9C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #dade75;
  --color-2: #54be9f;
  --color-3: #287e9c;
  --color-4: #196b62;
  --color-5: #2d3000;
}

SCSS

$color-1: #dade75;
$color-2: #54be9f;
$color-3: #287e9c;
$color-4: #196b62;
$color-5: #2d3000;

TAILWIND

colors: {
  'brand-1': '#dade75',
  'brand-2': '#54be9f',
  'brand-3': '#287e9c',
  'brand-4': '#196b62',
  'brand-5': '#2d3000',
}

RGB Array

[218, 222, 117], [84, 190, 159], [40, 126, 156], [25, 107, 98], [45, 48, 0]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #DADE75, #54BE9F, #287E9C, #196B62, #2D3000 is ideal for: social media posters, mobile apps, e-commerce promos, tech websites, dark mode UIs, game UIs, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #dade75; --color-2: #54be9f; --color-3: #287e9c; --color-4: #196b62; --color-5: #2d3000. LangColor editor supports one-click export to CSS, SCSS, Tailwind, JSON and more. Click the "Export" button to choose your format.

What UI/UX design tips apply to this palette?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. High-contrast palettes naturally meet WCAG accessibility standards. Use the "Contrast Matrix" tool in LangColor editor to check WCAG accessibility levels for every color pair.

Which industries or brands suit this palette?

This general-style 5-color scheme is especially suited for food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. Click "AI Analysis" in the editor for more detailed brand color suggestions.

🎨 Open this palette in Editor →

Generated by LangColor online color tool · Breaking the barrier between language and color