#C4B277 + #FBF6E6 + #FB735C + #ADB0BC + #829D94 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C4B277

Ginger · Tan · Sunflower

HEX

#C4B277

RGB

rgb(196, 178, 119)

HSL

hsl(46, 39%, 62%)

HSB

hsb(46, 39%, 77%)

CMYK

cmyk(0%, 9%, 39%, 23%)

Oklch

oklch(76.5% 0.080 93.1)

Traditional「Ginger」· Paint「Sunflower」· Creative Lemon Fizz

#FBF6E6

Goose Yellow · Linen · Lemon Cream

HEX

#FBF6E6

RGB

rgb(251, 246, 230)

HSL

hsl(46, 72%, 94%)

HSB

hsb(46, 8%, 98%)

CMYK

cmyk(0%, 2%, 8%, 2%)

Oklch

oklch(97.3% 0.022 92.5)

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

#FB735C

Peach Pink · Coral · Coral Red

HEX

#FB735C

RGB

rgb(251, 115, 92)

HSL

hsl(9, 95%, 67%)

HSB

hsb(9, 63%, 98%)

CMYK

cmyk(0%, 54%, 63%, 2%)

Oklch

oklch(71.4% 0.171 31.4)

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

#ADB0BC

Azure · DarkGray · Cobalt Blue

HEX

#ADB0BC

RGB

rgb(173, 176, 188)

HSL

hsl(228, 10%, 71%)

HSB

hsb(228, 8%, 74%)

CMYK

cmyk(8%, 6%, 0%, 26%)

Oklch

oklch(75.9% 0.017 274.7)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#829D94

Mineral Blue · LightSlateGray · Lake Green

HEX

#829D94

RGB

rgb(130, 157, 148)

HSL

hsl(160, 12%, 56%)

HSB

hsb(160, 17%, 62%)

CMYK

cmyk(17%, 0%, 6%, 38%)

Oklch

oklch(67.3% 0.033 173.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C4B277

788AC4

Analogous

C48C78

C4B277

B0C478

Triadic

C4B277

78C4B2

B278C4

Split-Comp.

C4B277

78B0C4

8C78C4

Tetradic

C4B277

78C48C

788AC4

C478B0

Contrast Matrix WCAG 2.1 Contrast

C4B277	FBF6E6	FB735C	ADB0BC	829D94
—	1.9 Fail	1.3 Fail	1.0 Fail	1.4 Fail
1.9 Fail	—	2.5 Fail	2.0 Fail	2.7 Fail
1.3 Fail	2.5 Fail	—	1.3 Fail	1.1 Fail
1.0 Fail	2.0 Fail	1.3 Fail	—	1.3 Fail
1.4 Fail	2.7 Fail	1.1 Fail	1.3 Fail	—

White BG

2.1Fail

1.1Fail

2.7Fail

2.2Fail

2.9Fail

Black BG

10.0AAA

19.4AAA

7.7AAA

9.7AAA

7.2AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

BCBC85

F9F9EA

C0BF62

AEAEB9

8E8E96

Deuteranopia

BDBF89

F9FAEB

C8D263

AEAEB8

8C8A97

Tritanopia

C39193

FBEDEE

F46667

ADB7B6

839898

Achromatopsia

B1B1B1

F6F6F6

999999

B0B0B0

949494

Shades & Tints Shades & Tints

#C4B277

Dark

Light

#FBF6E6

Dark

Light

#FB735C

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c4b277;
  --color-2: #fbf6e6;
  --color-3: #fb735c;
  --color-4: #adb0bc;
  --color-5: #829d94;
}

SCSS

$color-1: #c4b277;
$color-2: #fbf6e6;
$color-3: #fb735c;
$color-4: #adb0bc;
$color-5: #829d94;

TAILWIND

colors: {
  'brand-1': '#c4b277',
  'brand-2': '#fbf6e6',
  'brand-3': '#fb735c',
  'brand-4': '#adb0bc',
  'brand-5': '#829d94',
}

RGB Array

[196, 178, 119], [251, 246, 230], [251, 115, 92], [173, 176, 188], [130, 157, 148]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C4B277, #FBF6E6, #FB735C, #ADB0BC, #829D94 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: #c4b277; --color-2: #fbf6e6; --color-3: #fb735c; --color-4: #adb0bc; --color-5: #829d94. 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