#FBB498 + #F8C681 + #BEC47E + #9BB78F + #98908D - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarm

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FBB498

Apricot · BurlyWood · Peach Orange

HEX

#FBB498

RGB

rgb(251, 180, 152)

HSL

hsl(17, 93%, 79%)

HSB

hsb(17, 39%, 98%)

CMYK

cmyk(0%, 28%, 39%, 2%)

Oklch

oklch(83.0% 0.092 42.4)

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

#F8C681

Goose Yellow · BurlyWood · Warm Sun

HEX

#F8C681

RGB

rgb(248, 198, 129)

HSL

hsl(35, 89%, 74%)

HSB

hsb(35, 48%, 97%)

CMYK

cmyk(0%, 20%, 48%, 3%)

Oklch

oklch(85.6% 0.104 74.6)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

#BEC47E

Fresh Green · Tan · Sunflower

HEX

#BEC47E

RGB

rgb(190, 196, 126)

HSL

hsl(65, 37%, 63%)

HSB

hsb(65, 36%, 77%)

CMYK

cmyk(3%, 0%, 36%, 23%)

Oklch

oklch(79.9% 0.092 112.5)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#9BB78F

Celadon · DarkSeaGreen · Apple Green

HEX

#9BB78F

RGB

rgb(155, 183, 143)

HSL

hsl(102, 22%, 64%)

HSB

hsb(102, 22%, 72%)

CMYK

cmyk(15%, 0%, 22%, 28%)

Oklch

oklch(74.8% 0.064 136.4)

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

#98908D

Ash · Gray · Silver Sand

HEX

#98908D

RGB

rgb(152, 144, 141)

HSL

hsl(16, 5%, 57%)

HSB

hsb(16, 7%, 60%)

CMYK

cmyk(0%, 5%, 7%, 40%)

Oklch

oklch(65.9% 0.011 41.8)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FBB498

98DFFB

Analogous

FB98AD

FBB498

FBE698

Triadic

FBB498

98FBB4

B498FB

Split-Comp.

FBB498

98FBE6

98ADFB

Tetradic

FBB498

ADFB98

98DFFB

E698FB

Contrast Matrix WCAG 2.1 Contrast

FBB498	F8C681	BEC47E	9BB78F	98908D
—	1.1 Fail	1.1 Fail	1.3 Fail	1.8 Fail
1.1 Fail	—	1.2 Fail	1.4 Fail	2.0 Fail
1.1 Fail	1.2 Fail	—	1.2 Fail	1.7 Fail
1.3 Fail	1.4 Fail	1.2 Fail	—	1.4 Fail
1.8 Fail	2.0 Fail	1.7 Fail	1.4 Fail	—

White BG

1.7Fail

1.6Fail

1.8Fail

2.2Fail

3.1AA Large

Black BG

12.1AAA

13.4AAA

11.4AAA

9.6AAA

6.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DCDC9F

E2E292

C1C18F

A7A799

95948E

Deuteranopia

E0E6A0

E5E996

C0C093

A6A39B

95968E

Tritanopia

F7A4A5

F69FA2

BE9C9F

9CA0A2

988E8E

Achromatopsia

C6C6C6

CDCDCD

BABABA

AAAAAA

929292

Shades & Tints Shades & Tints

#FBB498

Dark

Light

#F8C681

Dark

Light

#BEC47E

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #fbb498;
  --color-2: #f8c681;
  --color-3: #bec47e;
  --color-4: #9bb78f;
  --color-5: #98908d;
}

SCSS

$color-1: #fbb498;
$color-2: #f8c681;
$color-3: #bec47e;
$color-4: #9bb78f;
$color-5: #98908d;

TAILWIND

colors: {
  'brand-1': '#fbb498',
  'brand-2': '#f8c681',
  'brand-3': '#bec47e',
  'brand-4': '#9bb78f',
  'brand-5': '#98908d',
}

RGB Array

[251, 180, 152], [248, 198, 129], [190, 196, 126], [155, 183, 143], [152, 144, 141]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FBB498, #F8C681, #BEC47E, #9BB78F, #98908D is ideal for: health products, baby brands, fresh-style blogs. 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: #fbb498; --color-2: #f8c681; --color-3: #bec47e; --color-4: #9bb78f; --color-5: #98908d. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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