← Back to Editor

#F3C9A3 · #EFD9B4 · #50B7B6 · #667E80 · #4A5662

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

#F3C9A3

Apricot · Wheat · Peach Orange

HEX
#F3C9A3
RGB
rgb(243, 201, 163)
HSL
hsl(29, 77%, 80%)
HSB
hsb(29, 33%, 95%)
CMYK
cmyk(0%, 17%, 33%, 5%)
Oklch
oklch(86.3% 0.069 63.8)

Traditional「Apricot」· Paint「Peach Orange」· Creative Honey Glow

#EFD9B4

Goose Yellow · Wheat · Peach Orange

HEX
#EFD9B4
RGB
rgb(239, 217, 180)
HSL
hsl(38, 65%, 82%)
HSB
hsb(38, 25%, 94%)
CMYK
cmyk(0%, 9%, 25%, 6%)
Oklch
oklch(89.4% 0.054 80.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

#50B7B6

Mineral Blue · MediumAquaMarine · Lake Green

HEX
#50B7B6
RGB
rgb(80, 183, 182)
HSL
hsl(179, 42%, 52%)
HSB
hsb(179, 56%, 72%)
CMYK
cmyk(56%, 0%, 1%, 28%)
Oklch
oklch(71.9% 0.095 194.4)

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

#667E80

Slate Blue · SlateGray · Mint Ice

HEX
#667E80
RGB
rgb(102, 126, 128)
HSL
hsl(185, 11%, 45%)
HSB
hsb(185, 20%, 50%)
CMYK
cmyk(20%, 2%, 0%, 50%)
Oklch
oklch(57.5% 0.028 202.7)

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

#4A5662

Indigo · DarkSlateGray · Prussian Blue

HEX
#4A5662
RGB
rgb(74, 86, 98)
HSL
hsl(210, 14%, 34%)
HSB
hsb(210, 24%, 38%)
CMYK
cmyk(24%, 12%, 0%, 62%)
Oklch
oklch(44.7% 0.025 248.4)

Traditional「Indigo」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F3C9A3
A5CDF3

Analogous

F3A5A6
F3C9A3
F3F2A5

Triadic

F3C9A3
A5F3CB
CBA5F3

Split-Comp.

F3C9A3
A5F3F2
A5A6F3

Tetradic

F3C9A3
A6F3A5
A5CDF3
F2A5F3

Contrast Matrix WCAG 2.1 Contrast

F3C9A3
EFD9B4
50B7B6
667E80
4A5662
—
1.1
Fail
1.6
Fail
2.8
Fail
4.9
AA
1.1
Fail
—
1.7
Fail
3.1
AA Large
5.5
AA
1.6
Fail
1.7
Fail
—
1.8
Fail
3.1
AA Large
2.8
Fail
3.1
AA Large
1.8
Fail
—
1.7
Fail
4.9
AA
5.5
AA
3.1
AA Large
1.7
Fail
—
White BG
1.5Fail
1.4Fail
2.4Fail
4.3AA Large
7.5AAA
Black BG
13.7AAA
15.3AAA
8.8AAA
4.9AA
2.8Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

E1E0AC
E5E5BD
7D7EB6
707180
4F4F5F

Deuteranopia

E3E6AE
E7E8BF
776FB6
6F6D7F
4F4E5E

Tritanopia

F1B3B5
EEC4C6
55B6B6
677F7F
4B5D5C

Achromatopsia

D1D1D1
DBDBDB
989898
777777
545454

Shades & Tints Shades & Tints

#F3C9A3

Dark
Light

#EFD9B4

Dark
Light

#50B7B6

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f3c9a3;
  --color-2: #efd9b4;
  --color-3: #50b7b6;
  --color-4: #667e80;
  --color-5: #4a5662;
}

SCSS

$color-1: #f3c9a3;
$color-2: #efd9b4;
$color-3: #50b7b6;
$color-4: #667e80;
$color-5: #4a5662;

TAILWIND

colors: {
  'brand-1': '#f3c9a3',
  'brand-2': '#efd9b4',
  'brand-3': '#50b7b6',
  'brand-4': '#667e80',
  'brand-5': '#4a5662',
}

RGB Array

[243, 201, 163], [239, 217, 180], [80, 183, 182], [102, 126, 128], [74, 86, 98]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F3C9A3, #EFD9B4, #50B7B6, #667E80, #4A5662 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: #f3c9a3; --color-2: #efd9b4; --color-3: #50b7b6; --color-4: #667e80; --color-5: #4a5662. 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