← Back to Editor

#4FA4AB · #74B5A1 · #E8D291 · #F1A75C · #E57C55

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 Library

Color Details Color Details

#4FA4AB

Slate Blue · CadetBlue · Mint Ice

HEX
#4FA4AB
RGB
rgb(79, 164, 171)
HSL
hsl(185, 37%, 49%)
HSB
hsb(185, 54%, 67%)
CMYK
cmyk(54%, 4%, 0%, 33%)
Oklch
oklch(66.9% 0.083 202.6)

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

#74B5A1

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#74B5A1
RGB
rgb(116, 181, 161)
HSL
hsl(162, 31%, 58%)
HSB
hsb(162, 36%, 71%)
CMYK
cmyk(36%, 0%, 11%, 29%)
Oklch
oklch(72.3% 0.073 172.7)

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

#E8D291

Goose Yellow · Khaki · Sunflower

HEX
#E8D291
RGB
rgb(232, 210, 145)
HSL
hsl(45, 65%, 74%)
HSB
hsb(45, 38%, 91%)
CMYK
cmyk(0%, 9%, 38%, 9%)
Oklch
oklch(86.7% 0.087 91.5)

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

#F1A75C

Ginger · SandyBrown · Warm Sun

HEX
#F1A75C
RGB
rgb(241, 167, 92)
HSL
hsl(30, 84%, 65%)
HSB
hsb(30, 62%, 95%)
CMYK
cmyk(0%, 31%, 62%, 5%)
Oklch
oklch(78.6% 0.126 64.5)

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

#E57C55

Apricot · Coral · Warm Sun

HEX
#E57C55
RGB
rgb(229, 124, 85)
HSL
hsl(16, 73%, 62%)
HSB
hsb(16, 63%, 90%)
CMYK
cmyk(0%, 46%, 63%, 10%)
Oklch
oklch(69.6% 0.141 40.7)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

4FA4AB
AB564F

Analogous

4FAB85
4FA4AB
4F75AB

Triadic

4FA4AB
AB4FA3
A3AB4F

Split-Comp.

4FA4AB
AB4F75
AB854F

Tetradic

4FA4AB
854FAB
AB564F
75AB4F

Contrast Matrix WCAG 2.1 Contrast

4FA4AB
74B5A1
E8D291
F1A75C
E57C55
—
1.2
Fail
1.9
Fail
1.4
Fail
1.0
Fail
1.2
Fail
—
1.6
Fail
1.2
Fail
1.2
Fail
1.9
Fail
1.6
Fail
—
1.3
Fail
1.9
Fail
1.4
Fail
1.2
Fail
1.3
Fail
—
1.4
Fail
1.0
Fail
1.2
Fail
1.9
Fail
1.4
Fail
—
White BG
2.9Fail
2.4Fail
1.5Fail
2.0Fail
2.9Fail
Black BG
7.2AAA
8.9AAA
14.1AAA
10.4AAA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

7475A9
9091A6
DEDEA1
D1D06E
B8B75E

Deuteranopia

6F69A9
8C88A7
E0E1A5
D5DB73
BEC561

Tritanopia

53A8A8
77AAAB
E7ADB0
ED7C80
E06668

Achromatopsia

8B8B8B
9F9F9F
D1D1D1
B5B5B5
979797

Shades & Tints Shades & Tints

#4FA4AB

Dark
Light

#74B5A1

Dark
Light

#E8D291

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #4fa4ab;
  --color-2: #74b5a1;
  --color-3: #e8d291;
  --color-4: #f1a75c;
  --color-5: #e57c55;
}

SCSS

$color-1: #4fa4ab;
$color-2: #74b5a1;
$color-3: #e8d291;
$color-4: #f1a75c;
$color-5: #e57c55;

TAILWIND

colors: {
  'brand-1': '#4fa4ab',
  'brand-2': '#74b5a1',
  'brand-3': '#e8d291',
  'brand-4': '#f1a75c',
  'brand-5': '#e57c55',
}

RGB Array

[79, 164, 171], [116, 181, 161], [232, 210, 145], [241, 167, 92], [229, 124, 85]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #4FA4AB, #74B5A1, #E8D291, #F1A75C, #E57C55 is ideal for: corporate websites, product showcases, portfolios. 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: #4fa4ab; --color-2: #74b5a1; --color-3: #e8d291; --color-4: #f1a75c; --color-5: #e57c55. 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. 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