← Back to Editor

#066259 · #84B18D · #BED081 · #D8E56F · #F4E23E

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#066259

Mineral Blue · DarkSlateGray · Peacock Green

HEX
#066259
RGB
rgb(6, 98, 89)
HSL
hsl(174, 88%, 20%)
HSB
hsb(174, 94%, 38%)
CMYK
cmyk(94%, 0%, 9%, 62%)
Oklch
oklch(44.7% 0.077 183.9)

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

#84B18D

Celadon · DarkSeaGreen · Apple Green

HEX
#84B18D
RGB
rgb(132, 177, 141)
HSL
hsl(132, 22%, 61%)
HSB
hsb(132, 25%, 69%)
CMYK
cmyk(25%, 0%, 20%, 31%)
Oklch
oklch(71.8% 0.071 150.4)

Traditional「Celadon」· Paint「Apple Green」· Creative Mint Breeze

#BED081

Willow Green · Tan · Apple Green

HEX
#BED081
RGB
rgb(190, 208, 129)
HSL
hsl(74, 46%, 66%)
HSB
hsb(74, 38%, 82%)
CMYK
cmyk(9%, 0%, 38%, 18%)
Oklch
oklch(82.6% 0.105 119.2)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

#D8E56F

Fresh Green · Khaki · Sunflower

HEX
#D8E56F
RGB
rgb(216, 229, 111)
HSL
hsl(67, 69%, 67%)
HSB
hsb(67, 52%, 90%)
CMYK
cmyk(6%, 0%, 52%, 10%)
Oklch
oklch(88.8% 0.143 114.6)

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

#F4E23E

Autumn Sage · Gold · Sunflower

HEX
#F4E23E
RGB
rgb(244, 226, 62)
HSL
hsl(54, 89%, 60%)
HSB
hsb(54, 75%, 96%)
CMYK
cmyk(0%, 7%, 75%, 4%)
Oklch
oklch(90.1% 0.172 102.8)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

066259
60060F

Analogous

06602A
066259
063C60

Triadic

066259
570660
605706

Split-Comp.

066259
60063C
602A06

Tetradic

066259
2A0660
60060F
3C6006

Contrast Matrix WCAG 2.1 Contrast

066259
84B18D
BED081
D8E56F
F4E23E
—
3.0
Fail
4.3
AA Large
5.3
AA
5.4
AA
3.0
Fail
—
1.4
Fail
1.8
Fail
1.8
Fail
4.3
AA Large
1.4
Fail
—
1.2
Fail
1.3
Fail
5.3
AA
1.8
Fail
1.2
Fail
—
1.0
Fail
5.4
AA
1.8
Fail
1.3
Fail
1.0
Fail
—
White BG
7.2AAA
2.4Fail
1.7Fail
1.4Fail
1.3Fail
Black BG
2.9Fail
8.7AAA
12.5AAA
15.4AAA
15.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

2E2F5B
979896
C6C694
DEDE8C
ECEC66

Deuteranopia

29225C
959298
C5C399
DDDC92
EDEF6F

Tritanopia

0B5D5D
869D9E
BFA3A7
D9A2A7
F3858C

Achromatopsia

454545
9F9F9F
C2C2C2
D4D4D4
D5D5D5

Shades & Tints Shades & Tints

#066259

Dark
Light

#84B18D

Dark
Light

#BED081

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #066259;
  --color-2: #84b18d;
  --color-3: #bed081;
  --color-4: #d8e56f;
  --color-5: #f4e23e;
}

SCSS

$color-1: #066259;
$color-2: #84b18d;
$color-3: #bed081;
$color-4: #d8e56f;
$color-5: #f4e23e;

TAILWIND

colors: {
  'brand-1': '#066259',
  'brand-2': '#84b18d',
  'brand-3': '#bed081',
  'brand-4': '#d8e56f',
  'brand-5': '#f4e23e',
}

RGB Array

[6, 98, 89], [132, 177, 141], [190, 208, 129], [216, 229, 111], [244, 226, 62]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #066259, #84B18D, #BED081, #D8E56F, #F4E23E is ideal for: social media posters, mobile apps, e-commerce promos, 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: #066259; --color-2: #84b18d; --color-3: #bed081; --color-4: #d8e56f; --color-5: #f4e23e. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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