#FFB77D + #DEC08C + #C0BD9D + #9DBCB4 + #60BED6 · space - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#FFB77D

Apricot · LightSalmon · Warm Sun

HEX

#FFB77D

RGB

rgb(255, 183, 125)

HSL

hsl(27, 100%, 75%)

HSB

hsb(27, 51%, 100%)

CMYK

cmyk(0%, 28%, 51%, 0%)

Oklch

oklch(83.5% 0.112 59.3)

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

#DEC08C

Goose Yellow · BurlyWood · Warm Sun

HEX

#DEC08C

RGB

rgb(222, 192, 140)

HSL

hsl(38, 55%, 71%)

HSB

hsb(38, 37%, 87%)

CMYK

cmyk(0%, 14%, 37%, 13%)

Oklch

oklch(82.1% 0.076 81.0)

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

#C0BD9D

Fresh Green · Tan · Sunflower

HEX

#C0BD9D

RGB

rgb(192, 189, 157)

HSL

hsl(55, 22%, 68%)

HSB

hsb(55, 18%, 75%)

CMYK

cmyk(0%, 2%, 18%, 25%)

Oklch

oklch(79.2% 0.044 102.9)

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

#9DBCB4

Jade · DarkGray · Lake Green

HEX

#9DBCB4

RGB

rgb(157, 188, 180)

HSL

hsl(165, 19%, 68%)

HSB

hsb(165, 16%, 74%)

CMYK

cmyk(16%, 0%, 4%, 26%)

Oklch

oklch(77.0% 0.035 178.0)

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

#60BED6

Sky Blue · MediumTurquoise · Lake Green

HEX

#60BED6

RGB

rgb(96, 190, 214)

HSL

hsl(192, 59%, 61%)

HSB

hsb(192, 55%, 84%)

CMYK

cmyk(55%, 11%, 0%, 16%)

Oklch

oklch(75.3% 0.095 216.7)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FFB77D

80C6FF

Analogous

FF8086

FFB77D

FFF980

Triadic

FFB77D

80FFB9

B980FF

Split-Comp.

FFB77D

80FFF9

8086FF

Tetradic

FFB77D

86FF80

80C6FF

F980FF

Contrast Matrix WCAG 2.1 Contrast

FFB77D	DEC08C	C0BD9D	9DBCB4	60BED6
—	1.0 Fail	1.1 Fail	1.2 Fail	1.3 Fail
1.0 Fail	—	1.1 Fail	1.2 Fail	1.2 Fail
1.1 Fail	1.1 Fail	—	1.1 Fail	1.1 Fail
1.2 Fail	1.2 Fail	1.1 Fail	—	1.0 Fail
1.3 Fail	1.2 Fail	1.1 Fail	1.0 Fail	—

White BG

1.7Fail

1.9Fail

2.0Fail

2.1Fail

Black BG

12.3AAA

12.0AAA

11.0AAA

10.3AAA

9.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

E0DF8B

D1D199

BFBFA5

AAABB6

898AD0

Deuteranopia

E4E98E

D3D59C

BFBFA7

A9A6B6

837CCF

Tritanopia

FB9699

DCA3A5

C0ABAC

9FB7B8

65CCCB

Achromatopsia

C6C6C6

C3C3C3

BABABA

B2B2B2

A5A5A5

Shades & Tints Shades & Tints

#FFB77D

Dark

Light

#DEC08C

Dark

Light

#C0BD9D

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ffb77d;
  --color-2: #dec08c;
  --color-3: #c0bd9d;
  --color-4: #9dbcb4;
  --color-5: #60bed6;
}

SCSS

$color-1: #ffb77d;
$color-2: #dec08c;
$color-3: #c0bd9d;
$color-4: #9dbcb4;
$color-5: #60bed6;

TAILWIND

colors: {
  'brand-1': '#ffb77d',
  'brand-2': '#dec08c',
  'brand-3': '#c0bd9d',
  'brand-4': '#9dbcb4',
  'brand-5': '#60bed6',
}

RGB Array

[255, 183, 125], [222, 192, 140], [192, 189, 157], [157, 188, 180], [96, 190, 214]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This space-style palette of #FFB77D, #DEC08C, #C0BD9D, #9DBCB4, #60BED6 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: #ffb77d; --color-2: #dec08c; --color-3: #c0bd9d; --color-4: #9dbcb4; --color-5: #60bed6. 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 space-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