← Back to Editor

#12DBB0 · #E83A74 · #697A09 · #CFD86E · #756B64

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 App

Color Details Color Details

#12DBB0

Mineral Blue · DarkTurquoise · Mint Ice

HEX
#12DBB0
RGB
rgb(18, 219, 176)
HSL
hsl(167, 85%, 46%)
HSB
hsb(167, 92%, 86%)
CMYK
cmyk(92%, 0%, 20%, 14%)
Oklch
oklch(79.5% 0.153 171.6)

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

#E83A74

Dark Violet · MediumVioletRed · Rose Pink

HEX
#E83A74
RGB
rgb(232, 58, 116)
HSL
hsl(340, 79%, 57%)
HSB
hsb(340, 75%, 91%)
CMYK
cmyk(0%, 75%, 50%, 9%)
Oklch
oklch(62.6% 0.212 6.1)

Traditional「Dark Violet」· Paint「Rose Pink」· Creative Blush Sunrise

#697A09

Autumn Sage · Olive · Honey Gold

HEX
#697A09
RGB
rgb(105, 122, 9)
HSL
hsl(69, 86%, 26%)
HSB
hsb(69, 93%, 48%)
CMYK
cmyk(14%, 0%, 93%, 52%)
Oklch
oklch(54.6% 0.126 119.1)

Traditional「Autumn Sage」· Paint「Honey Gold」· Creative Blush Sunrise

#CFD86E

Fresh Green · BurlyWood · Sunflower

HEX
#CFD86E
RGB
rgb(207, 216, 110)
HSL
hsl(65, 58%, 64%)
HSB
hsb(65, 49%, 85%)
CMYK
cmyk(4%, 0%, 49%, 15%)
Oklch
oklch(85.3% 0.131 113.2)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#756B64

Tangerine · DimGray · Warm Gray

HEX
#756B64
RGB
rgb(117, 107, 100)
HSL
hsl(25, 8%, 43%)
HSB
hsb(25, 15%, 46%)
CMYK
cmyk(0%, 9%, 15%, 54%)
Oklch
oklch(53.5% 0.017 57.4)

Traditional「Tangerine」· Paint「Warm Gray」· Creative Urban Concrete

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

12DBB0
D9123D

Analogous

12D94A
12DBB0
12A1D9

Triadic

12DBB0
AE12D9
D9AE12

Split-Comp.

12DBB0
D912A1
D94A12

Tetradic

12DBB0
4A12D9
D9123D
A1D912

Contrast Matrix WCAG 2.1 Contrast

12DBB0
E83A74
697A09
CFD86E
756B64
—
2.2
Fail
2.7
Fail
1.2
Fail
2.9
Fail
2.2
Fail
—
1.2
Fail
2.6
Fail
1.3
Fail
2.7
Fail
1.2
Fail
—
3.1
AA Large
1.1
Fail
1.2
Fail
2.6
Fail
3.1
AA Large
—
3.4
AA Large
2.9
Fail
1.3
Fail
1.1
Fail
3.4
AA Large
—
White BG
1.8Fail
4.0AA Large
4.8AA
1.5Fail
5.2AA
Black BG
11.8AAA
5.3AA
4.4AA Large
13.7AAA
4.0AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

696BBA
9D9B66
707124
D3D388
717166

Deuteranopia

5D4EBD
A7B463
6F6E2B
D2D28E
717266

Tritanopia

1CC3C4
DF5B58
6A3A3F
CF9CA0
746767

Achromatopsia

9A9A9A
757575
686868
C9C9C9
6D6D6D

Shades & Tints Shades & Tints

#12DBB0

Dark
Light

#E83A74

Dark
Light

#697A09

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #12dbb0;
  --color-2: #e83a74;
  --color-3: #697a09;
  --color-4: #cfd86e;
  --color-5: #756b64;
}

SCSS

$color-1: #12dbb0;
$color-2: #e83a74;
$color-3: #697a09;
$color-4: #cfd86e;
$color-5: #756b64;

TAILWIND

colors: {
  'brand-1': '#12dbb0',
  'brand-2': '#e83a74',
  'brand-3': '#697a09',
  'brand-4': '#cfd86e',
  'brand-5': '#756b64',
}

RGB Array

[18, 219, 176], [232, 58, 116], [105, 122, 9], [207, 216, 110], [117, 107, 100]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #12DBB0, #E83A74, #697A09, #CFD86E, #756B64 is ideal for: social media posters, mobile apps, e-commerce promos. Vivid colors effectively attract user attention. 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: #12dbb0; --color-2: #e83a74; --color-3: #697a09; --color-4: #cfd86e; --color-5: #756b64. 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. 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