← Back to Editor

#357C74 · #4B9C82 · #CBDAA8 · #FBECC0 · #F0AF91

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#357C74

Mineral Blue · SeaGreen · Mint Ice

HEX
#357C74
RGB
rgb(53, 124, 116)
HSL
hsl(173, 40%, 35%)
HSB
hsb(173, 57%, 49%)
CMYK
cmyk(57%, 0%, 6%, 51%)
Oklch
oklch(53.9% 0.072 185.3)

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

#4B9C82

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#4B9C82
RGB
rgb(75, 156, 130)
HSL
hsl(161, 35%, 45%)
HSB
hsb(161, 52%, 61%)
CMYK
cmyk(52%, 0%, 17%, 39%)
Oklch
oklch(63.4% 0.090 170.0)

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

#CBDAA8

Willow Green · Silver · Apple Green

HEX
#CBDAA8
RGB
rgb(203, 218, 168)
HSL
hsl(78, 40%, 76%)
HSB
hsb(78, 23%, 85%)
CMYK
cmyk(7%, 0%, 23%, 15%)
Oklch
oklch(86.4% 0.068 121.4)

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

#FBECC0

Goose Yellow · Bisque · Lemon Cream

HEX
#FBECC0
RGB
rgb(251, 236, 192)
HSL
hsl(45, 88%, 87%)
HSB
hsb(45, 24%, 98%)
CMYK
cmyk(0%, 6%, 24%, 2%)
Oklch
oklch(94.4% 0.059 91.5)

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

#F0AF91

Apricot · BurlyWood · Warm Sun

HEX
#F0AF91
RGB
rgb(240, 175, 145)
HSL
hsl(19, 76%, 75%)
HSB
hsb(19, 40%, 94%)
CMYK
cmyk(0%, 27%, 40%, 6%)
Oklch
oklch(80.8% 0.087 45.8)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

357C74
7D363E

Analogous

367D51
357C74
36627D

Triadic

357C74
75367D
7D7536

Split-Comp.

357C74
7D3662
7D5136

Tetradic

357C74
51367D
7D363E
627D36

Contrast Matrix WCAG 2.1 Contrast

357C74
4B9C82
CBDAA8
FBECC0
F0AF91
—
1.5
Fail
3.3
AA Large
4.2
AA Large
2.6
Fail
1.5
Fail
—
2.2
Fail
2.8
Fail
1.8
Fail
3.3
AA Large
2.2
Fail
—
1.3
Fail
1.3
Fail
4.2
AA Large
2.8
Fail
1.3
Fail
—
1.6
Fail
2.6
Fail
1.8
Fail
1.3
Fail
1.6
Fail
—
White BG
4.9AA
3.3AA Large
1.5Fail
1.2Fail
1.9Fail
Black BG
4.3AA Large
6.4AA
14.1AAA
17.9AAA
11.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

545476
6E6F88
D1D2B4
F5F4CB
D4D398

Deuteranopia

504A76
69638A
D1D0B7
F5F7CD
D8DD9A

Tritanopia

397778
4F8D8E
CCBEC0
FAD3D5
ED9E9F

Achromatopsia

666666
818181
D0D0D0
EBEBEB
BFBFBF

Shades & Tints Shades & Tints

#357C74

Dark
Light

#4B9C82

Dark
Light

#CBDAA8

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #357c74;
  --color-2: #4b9c82;
  --color-3: #cbdaa8;
  --color-4: #fbecc0;
  --color-5: #f0af91;
}

SCSS

$color-1: #357c74;
$color-2: #4b9c82;
$color-3: #cbdaa8;
$color-4: #fbecc0;
$color-5: #f0af91;

TAILWIND

colors: {
  'brand-1': '#357c74',
  'brand-2': '#4b9c82',
  'brand-3': '#cbdaa8',
  'brand-4': '#fbecc0',
  'brand-5': '#f0af91',
}

RGB Array

[53, 124, 116], [75, 156, 130], [203, 218, 168], [251, 236, 192], [240, 175, 145]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #357C74, #4B9C82, #CBDAA8, #FBECC0, #F0AF91 is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. It is a balanced and harmonious choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #357c74; --color-2: #4b9c82; --color-3: #cbdaa8; --color-4: #fbecc0; --color-5: #f0af91. 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 tech, SaaS, healthcare, eco industries. 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