#F9DB93 + #FBBA92 + #C49490 + #6B879F + #5E6180 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#F9DB93

Goose Yellow · Khaki · Lemon Cream

HEX

#F9DB93

RGB

rgb(249, 219, 147)

HSL

hsl(42, 89%, 78%)

HSB

hsb(42, 41%, 98%)

CMYK

cmyk(0%, 12%, 41%, 2%)

Oklch

oklch(90.0% 0.096 87.8)

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

#FBBA92

Apricot · BurlyWood · Peach Orange

HEX

#FBBA92

RGB

rgb(251, 186, 146)

HSL

hsl(23, 93%, 78%)

HSB

hsb(23, 42%, 98%)

CMYK

cmyk(0%, 26%, 42%, 2%)

Oklch

oklch(84.0% 0.092 52.7)

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

#C49490

Peach Pink · Tan · Coral Red

HEX

#C49490

RGB

rgb(196, 148, 144)

HSL

hsl(5, 31%, 67%)

HSB

hsb(5, 27%, 77%)

CMYK

cmyk(0%, 24%, 27%, 23%)

Oklch

oklch(71.1% 0.059 24.1)

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

#6B879F

Slate Blue · LightSlateGray · Navy Blue

HEX

#6B879F

RGB

rgb(107, 135, 159)

HSL

hsl(208, 21%, 52%)

HSB

hsb(208, 33%, 62%)

CMYK

cmyk(33%, 15%, 0%, 38%)

Oklch

oklch(61.1% 0.049 244.6)

Traditional「Slate Blue」· Paint「Navy Blue」· Creative Blush Sunrise

#5E6180

Indigo · DimGray · Navy Blue

HEX

#5E6180

RGB

rgb(94, 97, 128)

HSL

hsl(235, 15%, 44%)

HSB

hsb(235, 27%, 50%)

CMYK

cmyk(27%, 24%, 0%, 50%)

Oklch

oklch(50.2% 0.049 280.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F9DB93

95B3F9

Analogous

F9A995

F9DB93

E5F995

Triadic

F9DB93

95F9DB

DB95F9

Split-Comp.

F9DB93

95E5F9

A995F9

Tetradic

F9DB93

95F9A9

95B3F9

F995E5

Contrast Matrix WCAG 2.1 Contrast

F9DB93	FBBA92	C49490	6B879F	5E6180
—	1.2 Fail	2.0 Fail	2.8 Fail	4.5 AA Large
1.2 Fail	—	1.6 Fail	2.2 Fail	3.6 AA Large
2.0 Fail	1.6 Fail	—	1.4 Fail	2.3 Fail
2.8 Fail	2.2 Fail	1.4 Fail	—	1.6 Fail
4.5 AA Large	3.6 AA Large	2.3 Fail	1.6 Fail	—

White BG

1.3Fail

1.7Fail

2.6Fail

3.8AA Large

6.0AA

Black BG

15.6AAA

12.5AAA

8.0AAA

5.6AA

3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

ECECA4

DFDE9C

AFAF91

777799

5F5F78

Deuteranopia

EEF0A9

E3E89E

B2B691

767398

5F5F77

Tritanopia

F7B2B5

F8A3A5

C29292

6C9594

5E7371

Achromatopsia

DCDCDC

C9C9C9

A2A2A2

818181

646464

Shades & Tints Shades & Tints

#F9DB93

Dark

Light

#FBBA92

Dark

Light

#C49490

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f9db93;
  --color-2: #fbba92;
  --color-3: #c49490;
  --color-4: #6b879f;
  --color-5: #5e6180;
}

SCSS

$color-1: #f9db93;
$color-2: #fbba92;
$color-3: #c49490;
$color-4: #6b879f;
$color-5: #5e6180;

TAILWIND

colors: {
  'brand-1': '#f9db93',
  'brand-2': '#fbba92',
  'brand-3': '#c49490',
  'brand-4': '#6b879f',
  'brand-5': '#5e6180',
}

RGB Array

[249, 219, 147], [251, 186, 146], [196, 148, 144], [107, 135, 159], [94, 97, 128]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F9DB93, #FBBA92, #C49490, #6B879F, #5E6180 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: #f9db93; --color-2: #fbba92; --color-3: #c49490; --color-4: #6b879f; --color-5: #5e6180. 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 nature-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