← Back to Editor

#0D395E · #226367 · #39A46E · #64B674 · #97E666

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#0D395E

Lake Blue · MidnightBlue · Prussian Blue

HEX
#0D395E
RGB
rgb(13, 57, 94)
HSL
hsl(207, 76%, 21%)
HSB
hsb(207, 86%, 37%)
CMYK
cmyk(86%, 39%, 0%, 63%)
Oklch
oklch(33.6% 0.080 248.6)

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

#226367

Slate Blue · DarkSlateGray · Mint Ice

HEX
#226367
RGB
rgb(34, 99, 103)
HSL
hsl(183, 50%, 27%)
HSB
hsb(183, 67%, 40%)
CMYK
cmyk(67%, 4%, 0%, 60%)
Oklch
oklch(46.1% 0.065 200.9)

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

#39A46E

Mineral Blue · MediumSeaGreen · Olive Green

HEX
#39A46E
RGB
rgb(57, 164, 110)
HSL
hsl(150, 48%, 43%)
HSB
hsb(150, 65%, 64%)
CMYK
cmyk(65%, 0%, 33%, 36%)
Oklch
oklch(64.3% 0.127 157.5)

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

#64B674

Celadon · MediumSeaGreen · Olive Green

HEX
#64B674
RGB
rgb(100, 182, 116)
HSL
hsl(132, 36%, 55%)
HSB
hsb(132, 45%, 71%)
CMYK
cmyk(45%, 0%, 36%, 29%)
Oklch
oklch(70.7% 0.125 148.7)

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

#97E666

Emerald · LightGreen · Apple Green

HEX
#97E666
RGB
rgb(151, 230, 102)
HSL
hsl(97, 72%, 65%)
HSB
hsb(97, 56%, 90%)
CMYK
cmyk(34%, 0%, 56%, 10%)
Oklch
oklch(84.7% 0.180 135.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

0D395E
5E310D

Analogous

0D5E5A
0D395E
0D115E

Triadic

0D395E
5E0D3A
3A5E0D

Split-Comp.

0D395E
5E0D11
5E5A0D

Tetradic

0D395E
5A0D5E
5E310D
115E0D

Contrast Matrix WCAG 2.1 Contrast

0D395E
226367
39A46E
64B674
97E666
—
1.7
Fail
3.8
AA Large
4.8
AA
7.8
AAA
1.7
Fail
—
2.2
Fail
2.8
Fail
4.5
AA
3.8
AA Large
2.2
Fail
—
1.3
Fail
2.1
Fail
4.8
AA
2.8
Fail
1.3
Fail
—
1.6
Fail
7.8
AAA
4.5
AA
2.1
Fail
1.6
Fail
—
White BG
11.9AAA
6.9AA
3.1AA Large
2.5Fail
1.5Fail
Black BG
1.8Fail
3.0AA Large
6.7AA
8.5AAA
13.8AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

202055
3E3F66
67687B
888884
B9BA85

Deuteranopia

1E1A53
3A3666
61597E
837D88
B5AF8C

Tritanopia

0F4E4C
256565
3E8588
689193
9B9DA3

Achromatopsia

303030
505050
7E7E7E
969696
C0C0C0

Shades & Tints Shades & Tints

#0D395E

Dark
Light

#226367

Dark
Light

#39A46E

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #0d395e;
  --color-2: #226367;
  --color-3: #39a46e;
  --color-4: #64b674;
  --color-5: #97e666;
}

SCSS

$color-1: #0d395e;
$color-2: #226367;
$color-3: #39a46e;
$color-4: #64b674;
$color-5: #97e666;

TAILWIND

colors: {
  'brand-1': '#0d395e',
  'brand-2': '#226367',
  'brand-3': '#39a46e',
  'brand-4': '#64b674',
  'brand-5': '#97e666',
}

RGB Array

[13, 57, 94], [34, 99, 103], [57, 164, 110], [100, 182, 116], [151, 230, 102]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #0D395E, #226367, #39A46E, #64B674, #97E666 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: #0d395e; --color-2: #226367; --color-3: #39a46e; --color-4: #64b674; --color-5: #97e666. 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