← Back to Editor

#99B3AF · #B79592 · #FA5050 · #D4A053 · #B4C25B

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

#99B3AF

Jade · DarkGray · Lake Green

HEX
#99B3AF
RGB
rgb(153, 179, 175)
HSL
hsl(171, 15%, 65%)
HSB
hsb(171, 15%, 70%)
CMYK
cmyk(15%, 0%, 2%, 30%)
Oklch
oklch(74.6% 0.029 185.3)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#B79592

Peach Pink · DarkGray · Coral Red

HEX
#B79592
RGB
rgb(183, 149, 146)
HSL
hsl(5, 20%, 65%)
HSB
hsb(5, 20%, 72%)
CMYK
cmyk(0%, 19%, 20%, 28%)
Oklch
oklch(70.0% 0.041 24.1)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#FA5050

Peach Pink · Tomato · Coral Red

HEX
#FA5050
RGB
rgb(250, 80, 80)
HSL
hsl(0, 94%, 65%)
HSB
hsb(0, 68%, 98%)
CMYK
cmyk(0%, 68%, 68%, 2%)
Oklch
oklch(66.8% 0.207 24.7)

Traditional「Peach Pink」· Paint「Coral Red」· Creative Blush Sunrise

#D4A053

Ginger · SandyBrown · Warm Sun

HEX
#D4A053
RGB
rgb(212, 160, 83)
HSL
hsl(36, 60%, 58%)
HSB
hsb(36, 61%, 83%)
CMYK
cmyk(0%, 25%, 61%, 17%)
Oklch
oklch(73.9% 0.113 75.2)

Traditional「Ginger」· Paint「Warm Sun」· Creative Blush Sunrise

#B4C25B

Autumn Sage · Tan · Sunflower

HEX
#B4C25B
RGB
rgb(180, 194, 91)
HSL
hsl(68, 46%, 56%)
HSB
hsb(68, 53%, 76%)
CMYK
cmyk(7%, 0%, 53%, 24%)
Oklch
oklch(78.2% 0.129 115.9)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

99B3AF
B3989C

Analogous

98B3A2
99B3AF
98AAB3

Triadic

99B3AF
AF98B3
B3AF98

Split-Comp.

99B3AF
B398AA
B3A298

Tetradic

99B3AF
A298B3
B3989C
AAB398

Contrast Matrix WCAG 2.1 Contrast

99B3AF
B79592
FA5050
D4A053
B4C25B
—
1.2
Fail
1.5
Fail
1.1
Fail
1.1
Fail
1.2
Fail
—
1.2
Fail
1.2
Fail
1.4
Fail
1.5
Fail
1.2
Fail
—
1.4
Fail
1.7
Fail
1.1
Fail
1.2
Fail
1.4
Fail
—
1.2
Fail
1.1
Fail
1.4
Fail
1.7
Fail
1.2
Fail
—
White BG
2.2Fail
2.7Fail
3.3AA Large
2.3Fail
1.9Fail
Black BG
9.4AAA
7.7AAA
6.3AA
9.0AAA
10.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

A4A4B0
A8A893
B0AF50
BDBD66
BABA74

Deuteranopia

A3A1B0
AAAD93
BAC750
C1C46A
B9B87A

Tritanopia

9AB1B1
B59393
F25050
D17478
B5888C

Achromatopsia

ABABAB
9F9F9F
838383
A7A7A7
B2B2B2

Shades & Tints Shades & Tints

#99B3AF

Dark
Light

#B79592

Dark
Light

#FA5050

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #99b3af;
  --color-2: #b79592;
  --color-3: #fa5050;
  --color-4: #d4a053;
  --color-5: #b4c25b;
}

SCSS

$color-1: #99b3af;
$color-2: #b79592;
$color-3: #fa5050;
$color-4: #d4a053;
$color-5: #b4c25b;

TAILWIND

colors: {
  'brand-1': '#99b3af',
  'brand-2': '#b79592',
  'brand-3': '#fa5050',
  'brand-4': '#d4a053',
  'brand-5': '#b4c25b',
}

RGB Array

[153, 179, 175], [183, 149, 146], [250, 80, 80], [212, 160, 83], [180, 194, 91]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #99B3AF, #B79592, #FA5050, #D4A053, #B4C25B 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: #99b3af; --color-2: #b79592; --color-3: #fa5050; --color-4: #d4a053; --color-5: #b4c25b. 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