← Back to Editor

#D7FB06 · #C0CC7A · #BAADAE · #848E9C · #4C6485

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 Library

Color Details Color Details

#D7FB06

Autumn Sage · Yellow · Honey Gold

HEX
#D7FB06
RGB
rgb(215, 251, 6)
HSL
hsl(69, 97%, 50%)
HSB
hsb(69, 98%, 98%)
CMYK
cmyk(14%, 0%, 98%, 2%)
Oklch
oklch(92.9% 0.219 119.7)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#C0CC7A

Fresh Green · Tan · Sunflower

HEX
#C0CC7A
RGB
rgb(192, 204, 122)
HSL
hsl(69, 45%, 64%)
HSB
hsb(69, 40%, 80%)
CMYK
cmyk(6%, 0%, 40%, 20%)
Oklch
oklch(81.7% 0.107 115.6)

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

#BAADAE

Peach Pink · DarkGray · Silver Sand

HEX
#BAADAE
RGB
rgb(186, 173, 174)
HSL
hsl(355, 9%, 70%)
HSB
hsb(355, 7%, 73%)
CMYK
cmyk(0%, 7%, 6%, 27%)
Oklch
oklch(75.9% 0.015 12.1)

Traditional「Peach Pink」· Paint「Silver Sand」· Creative Urban Concrete

#848E9C

Azure · LightSlateGray · Navy Blue

HEX
#848E9C
RGB
rgb(132, 142, 156)
HSL
hsl(215, 11%, 56%)
HSB
hsb(215, 15%, 61%)
CMYK
cmyk(15%, 9%, 0%, 39%)
Oklch
oklch(64.3% 0.024 256.8)

Traditional「Azure」· Paint「Navy Blue」· Creative Blush Sunrise

#4C6485

Indigo · DarkSlateBlue · Navy Blue

HEX
#4C6485
RGB
rgb(76, 100, 133)
HSL
hsl(215, 27%, 41%)
HSB
hsb(215, 43%, 52%)
CMYK
cmyk(43%, 25%, 0%, 48%)
Oklch
oklch(49.8% 0.060 256.5)

Traditional「Indigo」· Paint「Navy Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

D7FB06
2904FB

Analogous

FBA504
D7FB06
5AFB04

Triadic

D7FB06
04D6FB
FB04D6

Split-Comp.

D7FB06
045AFB
A504FB

Tetradic

D7FB06
04FBA5
2904FB
FB045A

Contrast Matrix WCAG 2.1 Contrast

D7FB06
C0CC7A
BAADAE
848E9C
4C6485
—
1.5
Fail
1.8
Fail
2.8
Fail
5.1
AA
1.5
Fail
—
1.3
Fail
1.9
Fail
3.5
AA Large
1.8
Fail
1.3
Fail
—
1.5
Fail
2.8
Fail
2.8
Fail
1.9
Fail
1.5
Fail
—
1.8
Fail
5.1
AA
3.5
AA Large
2.8
Fail
1.8
Fail
—
White BG
1.2Fail
1.7Fail
2.2Fail
3.3AA Large
6.1AA
Black BG
17.7AAA
12.2AAA
9.7AAA
6.3AA
3.5AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

E7E741
C5C58E
B4B4AE
888899
56577D

Deuteranopia

E5E250
C5C493
B5B6AE
888798
55537B

Tritanopia

D9707A
C19EA1
B9AEAE
859695
4D7775

Achromatopsia

D4D4D4
BFBFBF
B1B1B1
8D8D8D
616161

Shades & Tints Shades & Tints

#D7FB06

Dark
Light

#C0CC7A

Dark
Light

#BAADAE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #d7fb06;
  --color-2: #c0cc7a;
  --color-3: #baadae;
  --color-4: #848e9c;
  --color-5: #4c6485;
}

SCSS

$color-1: #d7fb06;
$color-2: #c0cc7a;
$color-3: #baadae;
$color-4: #848e9c;
$color-5: #4c6485;

TAILWIND

colors: {
  'brand-1': '#d7fb06',
  'brand-2': '#c0cc7a',
  'brand-3': '#baadae',
  'brand-4': '#848e9c',
  'brand-5': '#4c6485',
}

RGB Array

[215, 251, 6], [192, 204, 122], [186, 173, 174], [132, 142, 156], [76, 100, 133]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #D7FB06, #C0CC7A, #BAADAE, #848E9C, #4C6485 is ideal for: corporate websites, product showcases, portfolios. 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: #d7fb06; --color-2: #c0cc7a; --color-3: #baadae; --color-4: #848e9c; --color-5: #4c6485. 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. 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