← Back to Editor

#C6D2C6 · #F2FD01 · #DDE921 · #DAF90C · #889D93

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#C6D2C6

Celadon · LightGray · Apple Green

HEX
#C6D2C6
RGB
rgb(198, 210, 198)
HSL
hsl(120, 12%, 80%)
HSB
hsb(120, 6%, 82%)
CMYK
cmyk(6%, 0%, 6%, 18%)
Oklch
oklch(85.1% 0.021 145.4)

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

#F2FD01

Autumn Sage · Yellow · Honey Gold

HEX
#F2FD01
RGB
rgb(242, 253, 1)
HSL
hsl(63, 99%, 50%)
HSB
hsb(63, 100%, 99%)
CMYK
cmyk(4%, 0%, 100%, 1%)
Oklch
oklch(95.4% 0.212 112.9)

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

#DDE921

Autumn Sage · Gold · Sunflower

HEX
#DDE921
RGB
rgb(221, 233, 33)
HSL
hsl(64, 82%, 52%)
HSB
hsb(64, 86%, 91%)
CMYK
cmyk(5%, 0%, 86%, 9%)
Oklch
oklch(89.5% 0.195 113.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#DAF90C

Autumn Sage · Yellow · Sunflower

HEX
#DAF90C
RGB
rgb(218, 249, 12)
HSL
hsl(68, 95%, 51%)
HSB
hsb(68, 95%, 98%)
CMYK
cmyk(12%, 0%, 95%, 2%)
Oklch
oklch(92.7% 0.215 118.5)

Traditional「Autumn Sage」· Paint「Sunflower」· Creative Blush Sunrise

#889D93

Mineral Blue · LightSlateGray · Olive Green

HEX
#889D93
RGB
rgb(136, 157, 147)
HSL
hsl(151, 10%, 57%)
HSB
hsb(151, 13%, 62%)
CMYK
cmyk(13%, 0%, 6%, 38%)
Oklch
oklch(67.7% 0.028 165.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C6D2C6
D2C6D2

Analogous

CCD2C6
C6D2C6
C6D2CC

Triadic

C6D2C6
C6C6D2
D2C6C6

Split-Comp.

C6D2C6
CCC6D2
D2C6CC

Tetradic

C6D2C6
C6CCD2
D2C6D2
D2CCC6

Contrast Matrix WCAG 2.1 Contrast

C6D2C6
F2FD01
DDE921
DAF90C
889D93
—
1.4
Fail
1.2
Fail
1.3
Fail
1.8
Fail
1.4
Fail
—
1.2
Fail
1.1
Fail
2.6
Fail
1.2
Fail
1.2
Fail
—
1.1
Fail
2.2
Fail
1.3
Fail
1.1
Fail
1.1
Fail
—
2.4
Fail
1.8
Fail
2.6
Fail
2.2
Fail
2.4
Fail
—
White BG
1.6Fail
1.1Fail
1.3Fail
1.2Fail
2.9Fail
Black BG
13.4AAA
18.8AAA
15.8AAA
17.5AAA
7.3AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CBCBC9
F7F73E
E2E251
E7E845
919195

Deuteranopia

CBCACA
F6F54D
E2E15D
E6E353
908E96

Tritanopia

C7CBCC
F36E79
DE7880
DC737D
899798

Achromatopsia

CDCDCD
DDDDDD
CFCFCF
D5D5D5
969696

Shades & Tints Shades & Tints

#C6D2C6

Dark
Light

#F2FD01

Dark
Light

#DDE921

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c6d2c6;
  --color-2: #f2fd01;
  --color-3: #dde921;
  --color-4: #daf90c;
  --color-5: #889d93;
}

SCSS

$color-1: #c6d2c6;
$color-2: #f2fd01;
$color-3: #dde921;
$color-4: #daf90c;
$color-5: #889d93;

TAILWIND

colors: {
  'brand-1': '#c6d2c6',
  'brand-2': '#f2fd01',
  'brand-3': '#dde921',
  'brand-4': '#daf90c',
  'brand-5': '#889d93',
}

RGB Array

[198, 210, 198], [242, 253, 1], [221, 233, 33], [218, 249, 12], [136, 157, 147]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C6D2C6, #F2FD01, #DDE921, #DAF90C, #889D93 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: #c6d2c6; --color-2: #f2fd01; --color-3: #dde921; --color-4: #daf90c; --color-5: #889d93. 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