← Back to Editor

#F58A50 · #F7D779 · #B9C596 · #9DAF9B · #58909B

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

#F58A50

Apricot · Coral · Warm Sun

HEX
#F58A50
RGB
rgb(245, 138, 80)
HSL
hsl(21, 89%, 64%)
HSB
hsb(21, 67%, 96%)
CMYK
cmyk(0%, 44%, 67%, 4%)
Oklch
oklch(73.9% 0.149 47.6)

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

#F7D779

Goose Yellow · Khaki · Sunflower

HEX
#F7D779
RGB
rgb(247, 215, 121)
HSL
hsl(45, 89%, 72%)
HSB
hsb(45, 51%, 97%)
CMYK
cmyk(0%, 13%, 51%, 3%)
Oklch
oklch(88.7% 0.119 91.1)

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

#B9C596

Willow Green · Tan · Apple Green

HEX
#B9C596
RGB
rgb(185, 197, 150)
HSL
hsl(75, 29%, 68%)
HSB
hsb(75, 24%, 77%)
CMYK
cmyk(6%, 0%, 24%, 23%)
Oklch
oklch(80.2% 0.065 119.5)

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

#9DAF9B

Celadon · DarkGray · Apple Green

HEX
#9DAF9B
RGB
rgb(157, 175, 155)
HSL
hsl(114, 11%, 65%)
HSB
hsb(114, 11%, 69%)
CMYK
cmyk(10%, 0%, 11%, 31%)
Oklch
oklch(73.4% 0.035 142.4)

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

#58909B

Slate Blue · CadetBlue · Mint Ice

HEX
#58909B
RGB
rgb(88, 144, 155)
HSL
hsl(190, 28%, 48%)
HSB
hsb(190, 43%, 61%)
CMYK
cmyk(43%, 7%, 0%, 39%)
Oklch
oklch(61.9% 0.061 211.5)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F58A50
51BCF5

Analogous

F5516A
F58A50
F5DC51

Triadic

F58A50
51F58B
8B51F5

Split-Comp.

F58A50
51F5DC
516AF5

Tetradic

F58A50
6AF551
51BCF5
DC51F5

Contrast Matrix WCAG 2.1 Contrast

F58A50
F7D779
B9C596
9DAF9B
58909B
—
1.7
Fail
1.3
Fail
1.0
Fail
1.5
Fail
1.7
Fail
—
1.3
Fail
1.7
Fail
2.5
Fail
1.3
Fail
1.3
Fail
—
1.3
Fail
2.0
Fail
1.0
Fail
1.7
Fail
1.3
Fail
—
1.5
Fail
1.5
Fail
2.5
Fail
2.0
Fail
1.5
Fail
—
White BG
2.4Fail
1.4Fail
1.8Fail
2.3Fail
3.6AA Large
Black BG
8.6AAA
15.0AAA
11.5AAA
9.0AAA
5.9AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C7C65E
E9E990
BEBEA1
A5A5A0
707198

Deuteranopia

CDD561
EBED95
BEBDA4
A4A2A1
6D6998

Tritanopia

F0696C
F5A2A6
BAAAAC
9EA4A5
5B9696

Achromatopsia

A3A3A3
D6D6D6
BCBCBC
A7A7A7
818181

Shades & Tints Shades & Tints

#F58A50

Dark
Light

#F7D779

Dark
Light

#B9C596

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f58a50;
  --color-2: #f7d779;
  --color-3: #b9c596;
  --color-4: #9daf9b;
  --color-5: #58909b;
}

SCSS

$color-1: #f58a50;
$color-2: #f7d779;
$color-3: #b9c596;
$color-4: #9daf9b;
$color-5: #58909b;

TAILWIND

colors: {
  'brand-1': '#f58a50',
  'brand-2': '#f7d779',
  'brand-3': '#b9c596',
  'brand-4': '#9daf9b',
  'brand-5': '#58909b',
}

RGB Array

[245, 138, 80], [247, 215, 121], [185, 197, 150], [157, 175, 155], [88, 144, 155]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F58A50, #F7D779, #B9C596, #9DAF9B, #58909B 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: #f58a50; --color-2: #f7d779; --color-3: #b9c596; --color-4: #9daf9b; --color-5: #58909b. 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