← Back to Editor

#03A4C3 · #42C8AD · #C9E920 · #FDF1CC · #897867

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

#03A4C3

Lake Blue · LightSeaGreen · Mint Ice

HEX
#03A4C3
RGB
rgb(3, 164, 195)
HSL
hsl(190, 97%, 39%)
HSB
hsb(190, 98%, 76%)
CMYK
cmyk(98%, 16%, 0%, 24%)
Oklch
oklch(66.3% 0.119 217.7)

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

#42C8AD

Mineral Blue · MediumTurquoise · Lake Green

HEX
#42C8AD
RGB
rgb(66, 200, 173)
HSL
hsl(168, 55%, 52%)
HSB
hsb(168, 67%, 78%)
CMYK
cmyk(67%, 0%, 13%, 22%)
Oklch
oklch(75.4% 0.121 176.6)

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

#C9E920

Grass Green · GreenYellow · Olive Green

HEX
#C9E920
RGB
rgb(201, 233, 32)
HSL
hsl(70, 82%, 52%)
HSB
hsb(70, 86%, 91%)
CMYK
cmyk(14%, 0%, 86%, 9%)
Oklch
oklch(88.0% 0.202 119.4)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#FDF1CC

Goose Yellow · Bisque · Lemon Cream

HEX
#FDF1CC
RGB
rgb(253, 241, 204)
HSL
hsl(45, 92%, 90%)
HSB
hsb(45, 19%, 99%)
CMYK
cmyk(0%, 5%, 19%, 1%)
Oklch
oklch(95.8% 0.050 92.2)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#897867

Ochre · Gray · Amber Brown

HEX
#897867
RGB
rgb(137, 120, 103)
HSL
hsl(30, 14%, 47%)
HSB
hsb(30, 25%, 54%)
CMYK
cmyk(0%, 12%, 25%, 46%)
Oklch
oklch(58.4% 0.033 67.1)

Traditional「Ochre」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

03A4C3
C42303

Analogous

03C484
03A4C3
0343C4

Triadic

03A4C3
C403A4
A4C403

Split-Comp.

03A4C3
C40343
C48403

Tetradic

03A4C3
8403C4
C42303
43C403

Contrast Matrix WCAG 2.1 Contrast

03A4C3
42C8AD
C9E920
FDF1CC
897867
—
1.4
Fail
2.1
Fail
2.6
Fail
1.4
Fail
1.4
Fail
—
1.5
Fail
1.8
Fail
2.0
Fail
2.1
Fail
1.5
Fail
—
1.2
Fail
3.1
AA Large
2.6
Fail
1.8
Fail
1.2
Fail
—
3.8
AA Large
1.4
Fail
2.0
Fail
3.1
AA Large
3.8
AA Large
—
White BG
3.0Fail
2.1Fail
1.4Fail
1.1Fail
4.2AA Large
Black BG
7.1AAA
10.1AAA
15.2AAA
18.6AAA
4.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

494ABB
7C7DB4
D7D751
F8F8D5
82816B

Deuteranopia

3F33BA
746AB5
D5D35C
F9F9D7
83846C

Tritanopia

0BB6B4
49B9BA
CB777F
FCDCDE
886E6F

Achromatopsia

777777
9D9D9D
C9C9C9
F0F0F0
7B7B7B

Shades & Tints Shades & Tints

#03A4C3

Dark
Light

#42C8AD

Dark
Light

#C9E920

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #03a4c3;
  --color-2: #42c8ad;
  --color-3: #c9e920;
  --color-4: #fdf1cc;
  --color-5: #897867;
}

SCSS

$color-1: #03a4c3;
$color-2: #42c8ad;
$color-3: #c9e920;
$color-4: #fdf1cc;
$color-5: #897867;

TAILWIND

colors: {
  'brand-1': '#03a4c3',
  'brand-2': '#42c8ad',
  'brand-3': '#c9e920',
  'brand-4': '#fdf1cc',
  'brand-5': '#897867',
}

RGB Array

[3, 164, 195], [66, 200, 173], [201, 233, 32], [253, 241, 204], [137, 120, 103]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #03A4C3, #42C8AD, #C9E920, #FDF1CC, #897867 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: #03a4c3; --color-2: #42c8ad; --color-3: #c9e920; --color-4: #fdf1cc; --color-5: #897867. 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