← Back to Editor

#676A58 · #FF2468 · #FB9213 · #CED4C6 · #006AB6

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

#676A58

Grass Green · DimGray · Charcoal

HEX
#676A58
RGB
rgb(103, 106, 88)
HSL
hsl(70, 9%, 38%)
HSB
hsb(70, 17%, 42%)
CMYK
cmyk(3%, 0%, 17%, 58%)
Oklch
oklch(51.6% 0.028 115.1)

Traditional「Grass Green」· Paint「Charcoal」· Creative Midnight Shadow

#FF2468

Dark Violet · DeepPink · Rose Pink

HEX
#FF2468
RGB
rgb(255, 36, 104)
HSL
hsl(341, 100%, 57%)
HSB
hsb(341, 86%, 100%)
CMYK
cmyk(0%, 86%, 59%, 0%)
Oklch
oklch(64.9% 0.244 11.4)

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

#FB9213

Ginger · Orange · Warm Sun

HEX
#FB9213
RGB
rgb(251, 146, 19)
HSL
hsl(33, 97%, 53%)
HSB
hsb(33, 92%, 98%)
CMYK
cmyk(0%, 42%, 92%, 2%)
Oklch
oklch(75.6% 0.171 61.4)

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

#CED4C6

Willow Green · LightGray · Apple Green

HEX
#CED4C6
RGB
rgb(206, 212, 198)
HSL
hsl(86, 14%, 80%)
HSB
hsb(86, 7%, 83%)
CMYK
cmyk(3%, 0%, 7%, 17%)
Oklch
oklch(86.1% 0.020 125.9)

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

#006AB6

Lake Blue · Teal · Prussian Blue

HEX
#006AB6
RGB
rgb(0, 106, 182)
HSL
hsl(205, 100%, 36%)
HSB
hsb(205, 100%, 71%)
CMYK
cmyk(100%, 42%, 0%, 29%)
Oklch
oklch(51.5% 0.144 249.6)

Traditional「Lake Blue」· Paint「Prussian Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

676A58
5B586A

Analogous

6A6458
676A58
5E6A58

Triadic

676A58
58676A
6A5867

Split-Comp.

676A58
585E6A
64586A

Tetradic

676A58
586A64
5B586A
6A585E

Contrast Matrix WCAG 2.1 Contrast

676A58
FF2468
FB9213
CED4C6
006AB6
—
1.5
Fail
2.4
Fail
3.7
AA Large
1.0
Fail
1.5
Fail
—
1.6
Fail
2.4
Fail
1.5
Fail
2.4
Fail
1.6
Fail
—
1.5
Fail
2.5
Fail
3.7
AA Large
2.4
Fail
1.5
Fail
—
3.7
AA Large
1.0
Fail
1.5
Fail
2.5
Fail
3.7
AA Large
—
White BG
5.6AA
3.7AA Large
2.3Fail
1.5Fail
5.6AA
Black BG
3.8AA Large
5.7AA
9.2AAA
13.9AAA
3.7AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

68685C
A09E58
CECD32
D1D1C9
2E2FA4

Deuteranopia

68685D
ADBD54
D4DC39
D0D0CA
28209F

Tritanopia

676061
F44B48
F64A4F
CECCCD
059592

Achromatopsia

676767
6D6D6D
A3A3A3
D1D1D1
535353

Shades & Tints Shades & Tints

#676A58

Dark
Light

#FF2468

Dark
Light

#FB9213

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #676a58;
  --color-2: #ff2468;
  --color-3: #fb9213;
  --color-4: #ced4c6;
  --color-5: #006ab6;
}

SCSS

$color-1: #676a58;
$color-2: #ff2468;
$color-3: #fb9213;
$color-4: #ced4c6;
$color-5: #006ab6;

TAILWIND

colors: {
  'brand-1': '#676a58',
  'brand-2': '#ff2468',
  'brand-3': '#fb9213',
  'brand-4': '#ced4c6',
  'brand-5': '#006ab6',
}

RGB Array

[103, 106, 88], [255, 36, 104], [251, 146, 19], [206, 212, 198], [0, 106, 182]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #676A58, #FF2468, #FB9213, #CED4C6, #006AB6 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: #676a58; --color-2: #ff2468; --color-3: #fb9213; --color-4: #ced4c6; --color-5: #006ab6. 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