#F0A959 + #7C9299 + #8CAFBA + #A7CCB1 + #D0E695 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#F0A959

Ginger · SandyBrown · Warm Sun

HEX

#F0A959

RGB

rgb(240, 169, 89)

HSL

hsl(32, 83%, 65%)

HSB

hsb(32, 63%, 94%)

CMYK

cmyk(0%, 30%, 63%, 6%)

Oklch

oklch(78.8% 0.128 67.3)

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

#7C9299

Slate Blue · LightSlateGray · Lake Green

HEX

#7C9299

RGB

rgb(124, 146, 153)

HSL

hsl(194, 12%, 54%)

HSB

hsb(194, 19%, 60%)

CMYK

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

Oklch

oklch(64.5% 0.027 219.0)

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

#8CAFBA

Sky Blue · DarkGray · Lake Green

HEX

#8CAFBA

RGB

rgb(140, 175, 186)

HSL

hsl(194, 25%, 64%)

HSB

hsb(194, 25%, 73%)

CMYK

cmyk(25%, 6%, 0%, 27%)

Oklch

oklch(73.2% 0.041 218.9)

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

#A7CCB1

Celadon · Silver · Apple Green

HEX

#A7CCB1

RGB

rgb(167, 204, 177)

HSL

hsl(136, 27%, 73%)

HSB

hsb(136, 18%, 80%)

CMYK

cmyk(18%, 0%, 13%, 20%)

Oklch

oklch(81.1% 0.055 153.4)

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

#D0E695

Willow Green · Khaki · Apple Green

HEX

#D0E695

RGB

rgb(208, 230, 149)

HSL

hsl(76, 62%, 74%)

HSB

hsb(76, 35%, 90%)

CMYK

cmyk(10%, 0%, 35%, 10%)

Oklch

oklch(89.0% 0.107 121.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F0A959

5CA1F0

Analogous

F0615C

F0A959

EBF05C

Triadic

F0A959

5CF0AB

AB5CF0

Split-Comp.

F0A959

5CEBF0

615CF0

Tetradic

F0A959

5CF061

5CA1F0

F05CEB

Contrast Matrix WCAG 2.1 Contrast

F0A959	7C9299	8CAFBA	A7CCB1	D0E695
—	1.6 Fail	1.2 Fail	1.1 Fail	1.5 Fail
1.6 Fail	—	1.4 Fail	1.9 Fail	2.4 Fail
1.2 Fail	1.4 Fail	—	1.3 Fail	1.7 Fail
1.1 Fail	1.9 Fail	1.3 Fail	—	1.3 Fail
1.5 Fail	2.4 Fail	1.7 Fail	1.3 Fail	—

White BG

2.0Fail

3.3AA Large

2.3Fail

1.8Fail

1.4Fail

Black BG

10.5AAA

6.4AA

9.0AAA

11.9AAA

15.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

D1D16C

868697

9B9BB7

B7B7B8

DADAA9

Deuteranopia

D5DB71

848397

9997B7

B5B2B9

D8D7AD

Tritanopia

EC7C7F

7D9696

8EB5B5

A9BDBE

D1B8BB

Achromatopsia

B5B5B5

8C8C8C

A6A6A6

BEBEBE

D6D6D6

Shades & Tints Shades & Tints

#F0A959

Dark

Light

#7C9299

Dark

Light

#8CAFBA

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f0a959;
  --color-2: #7c9299;
  --color-3: #8cafba;
  --color-4: #a7ccb1;
  --color-5: #d0e695;
}

SCSS

$color-1: #f0a959;
$color-2: #7c9299;
$color-3: #8cafba;
$color-4: #a7ccb1;
$color-5: #d0e695;

TAILWIND

colors: {
  'brand-1': '#f0a959',
  'brand-2': '#7c9299',
  'brand-3': '#8cafba',
  'brand-4': '#a7ccb1',
  'brand-5': '#d0e695',
}

RGB Array

[240, 169, 89], [124, 146, 153], [140, 175, 186], [167, 204, 177], [208, 230, 149]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F0A959, #7C9299, #8CAFBA, #A7CCB1, #D0E695 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: #f0a959; --color-2: #7c9299; --color-3: #8cafba; --color-4: #a7ccb1; --color-5: #d0e695. 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