← Back to Editor

#C6CEDD · #B0B5CD · #949DBD · #FFE607

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReading

Color Details Color Details

#C6CEDD

Azure · LightGray · Sky Blue

HEX
#C6CEDD
RGB
rgb(198, 206, 221)
HSL
hsl(219, 25%, 82%)
HSB
hsb(219, 10%, 87%)
CMYK
cmyk(10%, 7%, 0%, 13%)
Oklch
oklch(85.0% 0.023 263.2)

Traditional「Azure」· Paint「Sky Blue」· Creative Twilight Haze

#B0B5CD

Azure · LightSteelBlue · Cobalt Blue

HEX
#B0B5CD
RGB
rgb(176, 181, 205)
HSL
hsl(230, 22%, 75%)
HSB
hsb(230, 14%, 80%)
CMYK
cmyk(14%, 12%, 0%, 20%)
Oklch
oklch(77.7% 0.035 276.2)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#949DBD

Azure · DarkGray · Cobalt Blue

HEX
#949DBD
RGB
rgb(148, 157, 189)
HSL
hsl(227, 24%, 66%)
HSB
hsb(227, 22%, 74%)
CMYK
cmyk(22%, 17%, 0%, 26%)
Oklch
oklch(70.0% 0.048 272.8)

Traditional「Azure」· Paint「Cobalt Blue」· Creative Twilight Haze

#FFE607

Autumn Sage · Gold · Sunflower

HEX
#FFE607
RGB
rgb(255, 230, 7)
HSL
hsl(54, 100%, 51%)
HSB
hsb(54, 97%, 100%)
CMYK
cmyk(0%, 10%, 97%, 0%)
Oklch
oklch(91.7% 0.191 101.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C6CEDD
DDD5C6

Analogous

C6D9DD
C6CEDD
C9C6DD

Triadic

C6CEDD
DDC6CE
CEDDC6

Split-Comp.

C6CEDD
DDC9C6
D9DDC6

Tetradic

C6CEDD
DDC6D9
DDD5C6
C6DDC9

Contrast Matrix WCAG 2.1 Contrast

C6CEDD
B0B5CD
949DBD
FFE607
—
1.3
Fail
1.7
Fail
1.2
Fail
1.3
Fail
—
1.3
Fail
1.6
Fail
1.7
Fail
1.3
Fail
—
2.1
Fail
1.2
Fail
1.6
Fail
2.1
Fail
—
White BG
1.6Fail
2.0Fail
2.7Fail
1.3Fail
Black BG
13.3AAA
10.3AAA
7.8AAA
16.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

C9CAD9
B2B2C7
9898B5
F4F43D

Deuteranopia

C9C8D9
B2B2C6
9797B3
F6F84A

Tritanopia

C6D7D6
B0C3C2
94AFAE
FE6871

Achromatopsia

CDCDCD
B6B6B6
9E9E9E
D4D4D4

Shades & Tints Shades & Tints

#C6CEDD

Dark
Light

#B0B5CD

Dark
Light

#949DBD

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c6cedd;
  --color-2: #b0b5cd;
  --color-3: #949dbd;
  --color-4: #ffe607;
}

SCSS

$color-1: #c6cedd;
$color-2: #b0b5cd;
$color-3: #949dbd;
$color-4: #ffe607;

TAILWIND

colors: {
  'brand-1': '#c6cedd',
  'brand-2': '#b0b5cd',
  'brand-3': '#949dbd',
  'brand-4': '#ffe607',
}

RGB Array

[198, 206, 221], [176, 181, 205], [148, 157, 189], [255, 230, 7]

FAQ FAQ

What scenarios is this 4-color palette suitable for?

This general-style palette of #C6CEDD, #B0B5CD, #949DBD, #FFE607 is ideal for: health products, baby brands, fresh-style blogs. It is a balanced and harmonious choice among 4-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #c6cedd; --color-2: #b0b5cd; --color-3: #949dbd; --color-4: #ffe607. 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 4-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