← Back to Editor

#002622 · #4A6B37 · #97E8CE · #D68A54 · #CF6C25

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

#002622

Mineral Blue · Black · Peacock Green

HEX
#002622
RGB
rgb(0, 38, 34)
HSL
hsl(174, 100%, 7%)
HSB
hsb(174, 100%, 15%)
CMYK
cmyk(100%, 0%, 11%, 85%)
Oklch
oklch(24.1% 0.043 184.5)

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

#4A6B37

Celadon · DarkOliveGreen · Forest Green

HEX
#4A6B37
RGB
rgb(74, 107, 55)
HSL
hsl(98, 32%, 32%)
HSB
hsb(98, 49%, 42%)
CMYK
cmyk(31%, 0%, 49%, 58%)
Oklch
oklch(48.9% 0.087 135.0)

Traditional「Celadon」· Paint「Forest Green」· Creative Blush Sunrise

#97E8CE

Jade · LightBlue · Lake Green

HEX
#97E8CE
RGB
rgb(151, 232, 206)
HSL
hsl(161, 64%, 75%)
HSB
hsb(161, 35%, 91%)
CMYK
cmyk(35%, 0%, 11%, 9%)
Oklch
oklch(87.1% 0.088 171.9)

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

#D68A54

Tangerine · SandyBrown · Warm Sun

HEX
#D68A54
RGB
rgb(214, 138, 84)
HSL
hsl(25, 61%, 58%)
HSB
hsb(25, 61%, 84%)
CMYK
cmyk(0%, 36%, 61%, 16%)
Oklch
oklch(70.1% 0.116 54.9)

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

#CF6C25

Tangerine · Chocolate · Amber Brown

HEX
#CF6C25
RGB
rgb(207, 108, 37)
HSL
hsl(25, 70%, 48%)
HSB
hsb(25, 82%, 81%)
CMYK
cmyk(0%, 48%, 82%, 19%)
Oklch
oklch(63.5% 0.148 51.4)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

002622
240004

Analogous

00240E
002622
001524

Triadic

002622
200024
242000

Split-Comp.

002622
240015
240E00

Tetradic

002622
0E0024
240004
152400

Contrast Matrix WCAG 2.1 Contrast

002622
4A6B37
97E8CE
D68A54
CF6C25
—
2.7
Fail
11.3
AAA
5.9
AA
4.5
AA Large
2.7
Fail
—
4.3
AA Large
2.2
Fail
1.7
Fail
11.3
AAA
4.3
AA Large
—
1.9
Fail
2.5
Fail
5.9
AA
2.2
Fail
1.9
Fail
—
1.3
Fail
4.5
AA Large
1.7
Fail
2.5
Fail
1.3
Fail
—
White BG
16.1AAA
6.1AA
1.4Fail
2.8Fail
3.6AA Large
Black BG
1.3Fail
3.4AA Large
14.7AAA
7.6AAA
5.8AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

101123
585944
BABBD4
B5B461
A4A336

Deuteranopia

0E0B23
565447
B5AFD6
BABF64
AAB13A

Tritanopia

022424
4C4E50
9BD9DA
D26B6E
CA4447

Achromatopsia

1A1A1A
5B5B5B
CDCDCD
9B9B9B
828282

Shades & Tints Shades & Tints

#002622

Dark
Light

#4A6B37

Dark
Light

#97E8CE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #002622;
  --color-2: #4a6b37;
  --color-3: #97e8ce;
  --color-4: #d68a54;
  --color-5: #cf6c25;
}

SCSS

$color-1: #002622;
$color-2: #4a6b37;
$color-3: #97e8ce;
$color-4: #d68a54;
$color-5: #cf6c25;

TAILWIND

colors: {
  'brand-1': '#002622',
  'brand-2': '#4a6b37',
  'brand-3': '#97e8ce',
  'brand-4': '#d68a54',
  'brand-5': '#cf6c25',
}

RGB Array

[0, 38, 34], [74, 107, 55], [151, 232, 206], [214, 138, 84], [207, 108, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #002622, #4A6B37, #97E8CE, #D68A54, #CF6C25 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: #002622; --color-2: #4a6b37; --color-3: #97e8ce; --color-4: #d68a54; --color-5: #cf6c25. 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