← Back to Editor

#0C0C0E · #30D9B0 · #FCF3D4 · #F3B5A8 · #FF1948

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

PassionateDynamicWarmCool

Industry INDUSTRY

EntertainmentFMCG

UI Context UI CONTEXT

Sale PromoSocial AppData Visualization

Color Details Color Details

#0C0C0E

Deep Indigo · Black · Jet Black

HEX
#0C0C0E
RGB
rgb(12, 12, 14)
HSL
hsl(240, 8%, 5%)
HSB
hsb(240, 14%, 5%)
CMYK
cmyk(14%, 14%, 0%, 95%)
Oklch
oklch(15.5% 0.004 285.9)

Traditional「Deep Indigo」· Paint「Jet Black」· Creative Midnight Shadow

#30D9B0

Mineral Blue · Turquoise · Lake Green

HEX
#30D9B0
RGB
rgb(48, 217, 176)
HSL
hsl(165, 69%, 52%)
HSB
hsb(165, 78%, 85%)
CMYK
cmyk(78%, 0%, 19%, 15%)
Oklch
oklch(79.3% 0.145 171.5)

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

#FCF3D4

Goose Yellow · Beige · Lemon Cream

HEX
#FCF3D4
RGB
rgb(252, 243, 212)
HSL
hsl(46, 87%, 91%)
HSB
hsb(46, 16%, 99%)
CMYK
cmyk(0%, 4%, 16%, 1%)
Oklch
oklch(96.3% 0.042 93.6)

Traditional「Goose Yellow」· Paint「Lemon Cream」· Creative Lemon Fizz

#F3B5A8

Peach Pink · LightPink · Cherry Blossom

HEX
#F3B5A8
RGB
rgb(243, 181, 168)
HSL
hsl(10, 76%, 81%)
HSB
hsb(10, 31%, 95%)
CMYK
cmyk(0%, 26%, 31%, 5%)
Oklch
oklch(82.7% 0.075 32.1)

Traditional「Peach Pink」· Paint「Cherry Blossom」· Creative Blush Sunrise

#FF1948

Vermilion · Crimson · Passion Red

HEX
#FF1948
RGB
rgb(255, 25, 72)
HSL
hsl(348, 100%, 55%)
HSB
hsb(348, 90%, 100%)
CMYK
cmyk(0%, 90%, 72%, 0%)
Oklch
oklch(63.9% 0.248 19.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0C0C0E
0E0E0C

Analogous

0C0D0E
0C0C0E
0D0C0E

Triadic

0C0C0E
0E0C0C
0C0E0C

Split-Comp.

0C0C0E
0E0D0C
0D0E0C

Tetradic

0C0C0E
0E0C0D
0E0E0C
0C0E0D

Contrast Matrix WCAG 2.1 Contrast

0C0C0E
30D9B0
FCF3D4
F3B5A8
FF1948
—
10.9
AAA
17.6
AAA
11.2
AAA
5.1
AA
10.9
AAA
—
1.6
Fail
1.0
Fail
2.1
Fail
17.6
AAA
1.6
Fail
—
1.6
Fail
3.4
AA Large
11.2
AAA
1.0
Fail
1.6
Fail
—
2.2
Fail
5.1
AA
2.1
Fail
3.4
AA Large
2.2
Fail
—
White BG
19.5AAA
1.8Fail
1.1Fail
1.8Fail
3.8AA Large
Black BG
1.1Fail
11.7AAA
18.9AAA
12.0AAA
5.5AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

0C0C0E
797BBA
F8F8DC
D8D8AB
9B993D

Deuteranopia

0C0C0D
6F63BC
F9F9DD
DCE0AC
A9BA3A

Tritanopia

0C0D0D
38C2C3
FCE1E3
F0AEAE
F43432

Achromatopsia

0C0C0C
A2A2A2
F2F2F2
C6C6C6
636363

Shades & Tints Shades & Tints

#0C0C0E

Dark
Light

#30D9B0

Dark
Light

#FCF3D4

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0c0c0e;
  --color-2: #30d9b0;
  --color-3: #fcf3d4;
  --color-4: #f3b5a8;
  --color-5: #ff1948;
}

SCSS

$color-1: #0c0c0e;
$color-2: #30d9b0;
$color-3: #fcf3d4;
$color-4: #f3b5a8;
$color-5: #ff1948;

TAILWIND

colors: {
  'brand-1': '#0c0c0e',
  'brand-2': '#30d9b0',
  'brand-3': '#fcf3d4',
  'brand-4': '#f3b5a8',
  'brand-5': '#ff1948',
}

RGB Array

[12, 12, 14], [48, 217, 176], [252, 243, 212], [243, 181, 168], [255, 25, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0C0C0E, #30D9B0, #FCF3D4, #F3B5A8, #FF1948 is ideal for: social media posters, mobile apps, e-commerce promos, infographics, data visualization, accessible design. Vivid colors effectively attract user attention. High contrast ensures clear visual hierarchy and readability. It is a vibrant and energetic choice among 5-color palettes.

How to use this palette in CSS or frontend projects?

Copy the CSS variables directly: --color-1: #0c0c0e; --color-2: #30d9b0; --color-3: #fcf3d4; --color-4: #f3b5a8; --color-5: #ff1948. 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 food & dining, entertainment, kids education, social industries. Bold colors convey vitality and innovation. 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