← Back to Editor

#FF0027 · #C0D8D1 · #99999A · #48A09D · #51515F

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

#FF0027

Vermilion · Red · Passion Red

HEX
#FF0027
RGB
rgb(255, 0, 39)
HSL
hsl(351, 100%, 50%)
HSB
hsb(351, 100%, 100%)
CMYK
cmyk(0%, 100%, 85%, 0%)
Oklch
oklch(63.0% 0.256 25.7)

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

#C0D8D1

Jade · LightGray · Glacier Blue

HEX
#C0D8D1
RGB
rgb(192, 216, 209)
HSL
hsl(162, 24%, 80%)
HSB
hsb(162, 11%, 85%)
CMYK
cmyk(11%, 0%, 3%, 15%)
Oklch
oklch(86.2% 0.027 176.2)

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

#99999A

Ash · DarkGray · Silver Sand

HEX
#99999A
RGB
rgb(153, 153, 154)
HSL
hsl(240, 0%, 60%)
HSB
hsb(240, 1%, 60%)
CMYK
cmyk(1%, 1%, 0%, 40%)
Oklch
oklch(68.3% 0.001 286.4)

Traditional「Ash」· Paint「Silver Sand」· Creative Urban Concrete

#48A09D

Mineral Blue · CadetBlue · Mint Ice

HEX
#48A09D
RGB
rgb(72, 160, 157)
HSL
hsl(178, 38%, 45%)
HSB
hsb(178, 55%, 63%)
CMYK
cmyk(55%, 0%, 2%, 37%)
Oklch
oklch(65.1% 0.084 192.3)

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

#51515F

Deep Indigo · DimGray · Charcoal

HEX
#51515F
RGB
rgb(81, 81, 95)
HSL
hsl(240, 8%, 35%)
HSB
hsb(240, 15%, 37%)
CMYK
cmyk(15%, 15%, 0%, 63%)
Oklch
oklch(44.0% 0.023 285.4)

Traditional「Deep Indigo」· Paint「Charcoal」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF0027
00FFD9

Analogous

FF00A6
FF0027
FF5900

Triadic

FF0027
26FF00
0026FF

Split-Comp.

FF0027
00FF59
00A6FF

Tetradic

FF0027
A6FF00
00FFD9
5900FF

Contrast Matrix WCAG 2.1 Contrast

FF0027
C0D8D1
99999A
48A09D
51515F
—
2.6
Fail
1.4
Fail
1.3
Fail
2.0
Fail
2.6
Fail
—
1.9
Fail
2.1
Fail
5.2
AA
1.4
Fail
1.9
Fail
—
1.1
Fail
2.7
Fail
1.3
Fail
2.1
Fail
1.1
Fail
—
2.5
Fail
2.0
Fail
5.2
AA
2.7
Fail
2.5
Fail
—
White BG
4.0AA Large
1.5Fail
2.8Fail
3.1AA Large
7.8AAA
Black BG
5.3AA
14.0AAA
7.4AAA
6.8AA
2.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

918E1E
CACBD3
99999A
6E6F9E
51515C

Deuteranopia

9FB31B
C9C7D3
99999A
69629E
51515B

Tritanopia

F21614
C1D4D4
999A9A
4C9E9E
515958

Achromatopsia

515151
D0D0D0
999999
858585
535353

Shades & Tints Shades & Tints

#FF0027

Dark
Light

#C0D8D1

Dark
Light

#99999A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff0027;
  --color-2: #c0d8d1;
  --color-3: #99999a;
  --color-4: #48a09d;
  --color-5: #51515f;
}

SCSS

$color-1: #ff0027;
$color-2: #c0d8d1;
$color-3: #99999a;
$color-4: #48a09d;
$color-5: #51515f;

TAILWIND

colors: {
  'brand-1': '#ff0027',
  'brand-2': '#c0d8d1',
  'brand-3': '#99999a',
  'brand-4': '#48a09d',
  'brand-5': '#51515f',
}

RGB Array

[255, 0, 39], [192, 216, 209], [153, 153, 154], [72, 160, 157], [81, 81, 95]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF0027, #C0D8D1, #99999A, #48A09D, #51515F 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: #ff0027; --color-2: #c0d8d1; --color-3: #99999a; --color-4: #48a09d; --color-5: #51515f. 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