← Back to Editor

#C8F4FA · #547478 · #D15C5C · #D17F5C · #D1B45C

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

#C8F4FA

Sky Blue · Lavender · Glacier Blue

HEX
#C8F4FA
RGB
rgb(200, 244, 250)
HSL
hsl(187, 83%, 88%)
HSB
hsb(187, 20%, 98%)
CMYK
cmyk(20%, 2%, 0%, 2%)
Oklch
oklch(93.8% 0.046 206.6)

Traditional「Sky Blue」· Paint「Glacier Blue」· Creative Arctic Pool

#547478

Slate Blue · DimGray · Mint Ice

HEX
#547478
RGB
rgb(84, 116, 120)
HSL
hsl(187, 18%, 40%)
HSB
hsb(187, 30%, 47%)
CMYK
cmyk(30%, 3%, 0%, 53%)
Oklch
oklch(53.6% 0.037 205.7)

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

#D15C5C

Crimson · Tomato · Passion Red

HEX
#D15C5C
RGB
rgb(209, 92, 92)
HSL
hsl(0, 56%, 59%)
HSB
hsb(0, 56%, 82%)
CMYK
cmyk(0%, 56%, 56%, 18%)
Oklch
oklch(62.1% 0.149 22.4)

Traditional「Crimson」· Paint「Passion Red」· Creative Blush Sunrise

#D17F5C

Tangerine · DarkSalmon · Warm Sun

HEX
#D17F5C
RGB
rgb(209, 127, 92)
HSL
hsl(18, 56%, 59%)
HSB
hsb(18, 56%, 82%)
CMYK
cmyk(0%, 39%, 56%, 18%)
Oklch
oklch(67.6% 0.113 43.6)

Traditional「Tangerine」· Paint「Warm Sun」· Creative Blush Sunrise

#D1B45C

Ginger · SandyBrown · Sunflower

HEX
#D1B45C
RGB
rgb(209, 180, 92)
HSL
hsl(45, 56%, 59%)
HSB
hsb(45, 56%, 82%)
CMYK
cmyk(0%, 14%, 56%, 18%)
Oklch
oklch(77.7% 0.113 91.4)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C8F4FA
FACDC7

Analogous

C7FAE6
C8F4FA
C7DAFA

Triadic

C8F4FA
FAC7F4
F4FAC7

Split-Comp.

C8F4FA
FAC7DA
FAE6C7

Tetradic

C8F4FA
E6C7FA
FACDC7
DAFAC7

Contrast Matrix WCAG 2.1 Contrast

C8F4FA
547478
D15C5C
D17F5C
D1B45C
—
4.3
AA Large
3.3
AA Large
2.6
Fail
1.7
Fail
4.3
AA Large
—
1.3
Fail
1.7
Fail
2.5
Fail
3.3
AA Large
1.3
Fail
—
1.3
Fail
1.9
Fail
2.6
Fail
1.7
Fail
1.3
Fail
—
1.5
Fail
1.7
Fail
2.5
Fail
1.9
Fail
1.5
Fail
—
White BG
1.2Fail
5.1AA
3.9AA Large
3.0AA Large
2.0Fail
Black BG
17.8AAA
4.1AA Large
5.4AA
6.9AA
10.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

DBDBF9
626277
9E9D5C
ADAD64
C4C471

Deuteranopia

D9D5F8
605E77
A5AE5C
B2B867
C6C876

Tritanopia

CAF7F7
567676
CB5C5C
CD6B6D
D08286

Achromatopsia

E8E8E8
6B6B6B
7F7F7F
949494
B3B3B3

Shades & Tints Shades & Tints

#C8F4FA

Dark
Light

#547478

Dark
Light

#D15C5C

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c8f4fa;
  --color-2: #547478;
  --color-3: #d15c5c;
  --color-4: #d17f5c;
  --color-5: #d1b45c;
}

SCSS

$color-1: #c8f4fa;
$color-2: #547478;
$color-3: #d15c5c;
$color-4: #d17f5c;
$color-5: #d1b45c;

TAILWIND

colors: {
  'brand-1': '#c8f4fa',
  'brand-2': '#547478',
  'brand-3': '#d15c5c',
  'brand-4': '#d17f5c',
  'brand-5': '#d1b45c',
}

RGB Array

[200, 244, 250], [84, 116, 120], [209, 92, 92], [209, 127, 92], [209, 180, 92]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C8F4FA, #547478, #D15C5C, #D17F5C, #D1B45C is ideal for: infographics, data visualization, accessible design. High contrast ensures clear visual hierarchy and readability. 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: #c8f4fa; --color-2: #547478; --color-3: #d15c5c; --color-4: #d17f5c; --color-5: #d1b45c. 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. 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