← Back to Editor

#F5DD9D · #BCC499 · #92A68A · #7B8F8A · #506266

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#F5DD9D

Goose Yellow · Khaki · Lemon Cream

HEX
#F5DD9D
RGB
rgb(245, 221, 157)
HSL
hsl(44, 81%, 79%)
HSB
hsb(44, 36%, 96%)
CMYK
cmyk(0%, 10%, 36%, 4%)
Oklch
oklch(90.3% 0.086 89.8)

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

#BCC499

Willow Green · Tan · Apple Green

HEX
#BCC499
RGB
rgb(188, 196, 153)
HSL
hsl(71, 27%, 68%)
HSB
hsb(71, 22%, 77%)
CMYK
cmyk(4%, 0%, 22%, 23%)
Oklch
oklch(80.3% 0.059 116.3)

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

#92A68A

Celadon · DarkSeaGreen · Olive Green

HEX
#92A68A
RGB
rgb(146, 166, 138)
HSL
hsl(103, 14%, 60%)
HSB
hsb(103, 17%, 65%)
CMYK
cmyk(12%, 0%, 17%, 35%)
Oklch
oklch(70.2% 0.046 136.7)

Traditional「Celadon」· Paint「Olive Green」· Creative Blush Sunrise

#7B8F8A

Mineral Blue · LightSlateGray · Warm Gray

HEX
#7B8F8A
RGB
rgb(123, 143, 138)
HSL
hsl(165, 8%, 52%)
HSB
hsb(165, 14%, 56%)
CMYK
cmyk(14%, 0%, 3%, 44%)
Oklch
oklch(63.3% 0.024 178.7)

Traditional「Mineral Blue」· Paint「Warm Gray」· Creative Urban Concrete

#506266

Slate Blue · DimGray · Mint Ice

HEX
#506266
RGB
rgb(80, 98, 102)
HSL
hsl(191, 12%, 36%)
HSB
hsb(191, 22%, 40%)
CMYK
cmyk(22%, 4%, 0%, 60%)
Oklch
oklch(48.3% 0.023 212.7)

Traditional「Slate Blue」· Paint「Mint Ice」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F5DD9D
9EB5F5

Analogous

F5B29E
F5DD9D
E1F59E

Triadic

F5DD9D
9EF5DE
DE9EF5

Split-Comp.

F5DD9D
9EE1F5
B29EF5

Tetradic

F5DD9D
9EF5B2
9EB5F5
F59EE1

Contrast Matrix WCAG 2.1 Contrast

F5DD9D
BCC499
92A68A
7B8F8A
506266
—
1.4
Fail
2.0
Fail
2.6
Fail
4.8
AA
1.4
Fail
—
1.4
Fail
1.9
Fail
3.5
AA Large
2.0
Fail
1.4
Fail
—
1.3
Fail
2.5
Fail
2.6
Fail
1.9
Fail
1.3
Fail
—
1.9
Fail
4.8
AA
3.5
AA Large
2.5
Fail
1.9
Fail
—
White BG
1.3Fail
1.8Fail
2.6Fail
3.4AA Large
6.4AA
Black BG
15.7AAA
11.5AAA
8.0AAA
6.1AA
3.3AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

EBEAAC
BFC0A3
9B9B91
84848B
585865

Deuteranopia

ECEEB0
BFBEA6
9A9892
83818C
575565

Tritanopia

F4B9BB
BCACAD
939697
7C8C8C
516464

Achromatopsia

DDDDDD
BDBDBD
9D9D9D
888888
5D5D5D

Shades & Tints Shades & Tints

#F5DD9D

Dark
Light

#BCC499

Dark
Light

#92A68A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f5dd9d;
  --color-2: #bcc499;
  --color-3: #92a68a;
  --color-4: #7b8f8a;
  --color-5: #506266;
}

SCSS

$color-1: #f5dd9d;
$color-2: #bcc499;
$color-3: #92a68a;
$color-4: #7b8f8a;
$color-5: #506266;

TAILWIND

colors: {
  'brand-1': '#f5dd9d',
  'brand-2': '#bcc499',
  'brand-3': '#92a68a',
  'brand-4': '#7b8f8a',
  'brand-5': '#506266',
}

RGB Array

[245, 221, 157], [188, 196, 153], [146, 166, 138], [123, 143, 138], [80, 98, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #F5DD9D, #BCC499, #92A68A, #7B8F8A, #506266 is ideal for: brand design, premium product pages, magazine layouts, infographics, data visualization, accessible design. Low-saturation colors convey a sophisticated, premium feel. High contrast ensures clear visual hierarchy and readability. It is a classic and elegant choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #f5dd9d; --color-2: #bcc499; --color-3: #92a68a; --color-4: #7b8f8a; --color-5: #506266. 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. High-contrast palettes naturally meet WCAG accessibility standards. 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. Restrained colors convey professionalism and trust. 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