← Back to Editor

#C2D4C8 · #8AB4AB · #18092D · #AE5340 · #FB7C4B

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

#C2D4C8

Celadon · LightGray · Apple Green

HEX
#C2D4C8
RGB
rgb(194, 212, 200)
HSL
hsl(140, 17%, 80%)
HSB
hsb(140, 8%, 83%)
CMYK
cmyk(8%, 0%, 6%, 17%)
Oklch
oklch(85.3% 0.025 156.6)

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

#8AB4AB

Jade · DarkSeaGreen · Lake Green

HEX
#8AB4AB
RGB
rgb(138, 180, 171)
HSL
hsl(167, 22%, 62%)
HSB
hsb(167, 23%, 71%)
CMYK
cmyk(23%, 0%, 5%, 29%)
Oklch
oklch(73.7% 0.047 180.3)

Traditional「Jade」· Paint「Lake Green」· Creative Arctic Pool

#18092D

Deep Indigo · Black · Dark Purple

HEX
#18092D
RGB
rgb(24, 9, 45)
HSL
hsl(265, 67%, 11%)
HSB
hsb(265, 80%, 18%)
CMYK
cmyk(47%, 80%, 0%, 82%)
Oklch
oklch(18.7% 0.069 298.7)

Traditional「Deep Indigo」· Paint「Dark Purple」· Creative Blush Sunrise

#AE5340

Crimson · Sienna · Passion Red

HEX
#AE5340
RGB
rgb(174, 83, 64)
HSL
hsl(10, 46%, 47%)
HSB
hsb(10, 63%, 68%)
CMYK
cmyk(0%, 52%, 63%, 32%)
Oklch
oklch(55.1% 0.123 33.2)

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

#FB7C4B

Apricot · Coral · Warm Sun

HEX
#FB7C4B
RGB
rgb(251, 124, 75)
HSL
hsl(17, 96%, 64%)
HSB
hsb(17, 70%, 98%)
CMYK
cmyk(0%, 51%, 70%, 2%)
Oklch
oklch(72.5% 0.168 40.9)

Traditional「Apricot」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

C2D4C8
D5C3CF

Analogous

C6D5C3
C2D4C8
C3D5D2

Triadic

C2D4C8
C9C3D5
D5C9C3

Split-Comp.

C2D4C8
D2C3D5
D5C3C6

Tetradic

C2D4C8
C3C6D5
D5C3CF
D5D2C3

Contrast Matrix WCAG 2.1 Contrast

C2D4C8
8AB4AB
18092D
AE5340
FB7C4B
—
1.5
Fail
12.1
AAA
3.3
AA Large
1.7
Fail
1.5
Fail
—
8.2
AAA
2.2
Fail
1.1
Fail
12.1
AAA
8.2
AAA
—
3.7
AA Large
7.2
AAA
3.3
AA Large
2.2
Fail
3.7
AA Large
—
2.0
Fail
1.7
Fail
1.1
Fail
7.2
AAA
2.0
Fail
—
White BG
1.6Fail
2.3Fail
18.8AAA
5.1AA
2.6Fail
Black BG
13.5AAA
9.2AAA
1.1Fail
4.1AA Large
8.1AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

CACACB
9C9DAD
121124
878645
C4C357

Deuteranopia

C9C7CC
9A97AE
121322
8C9346
CBD55A

Tritanopia

C3CDCE
8CAFAF
171D1C
A94849
F56062

Achromatopsia

CDCDCD
A6A6A6
121212
6C6C6C
9C9C9C

Shades & Tints Shades & Tints

#C2D4C8

Dark
Light

#8AB4AB

Dark
Light

#18092D

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #c2d4c8;
  --color-2: #8ab4ab;
  --color-3: #18092d;
  --color-4: #ae5340;
  --color-5: #fb7c4b;
}

SCSS

$color-1: #c2d4c8;
$color-2: #8ab4ab;
$color-3: #18092d;
$color-4: #ae5340;
$color-5: #fb7c4b;

TAILWIND

colors: {
  'brand-1': '#c2d4c8',
  'brand-2': '#8ab4ab',
  'brand-3': '#18092d',
  'brand-4': '#ae5340',
  'brand-5': '#fb7c4b',
}

RGB Array

[194, 212, 200], [138, 180, 171], [24, 9, 45], [174, 83, 64], [251, 124, 75]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #C2D4C8, #8AB4AB, #18092D, #AE5340, #FB7C4B 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: #c2d4c8; --color-2: #8ab4ab; --color-3: #18092d; --color-4: #ae5340; --color-5: #fb7c4b. 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