← Back to Editor

#003643 · #1C2223 · #6F7338 · #B2A37C · #C9BEB1

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent LibraryData Visualization

Color Details Color Details

#003643

Lake Blue · DarkSlateGray · Peacock Green

HEX
#003643
RGB
rgb(0, 54, 67)
HSL
hsl(192, 100%, 13%)
HSB
hsb(192, 100%, 26%)
CMYK
cmyk(100%, 19%, 0%, 74%)
Oklch
oklch(30.8% 0.056 219.6)

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

#1C2223

Slate Blue · Black · Peacock Green

HEX
#1C2223
RGB
rgb(28, 34, 35)
HSL
hsl(189, 11%, 12%)
HSB
hsb(189, 20%, 14%)
CMYK
cmyk(20%, 3%, 0%, 86%)
Oklch
oklch(24.6% 0.009 208.7)

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

#6F7338

Autumn Sage · DarkOliveGreen · Honey Gold

HEX
#6F7338
RGB
rgb(111, 115, 56)
HSL
hsl(64, 35%, 34%)
HSB
hsb(64, 51%, 45%)
CMYK
cmyk(3%, 0%, 51%, 55%)
Oklch
oklch(53.8% 0.082 112.3)

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

#B2A37C

Ginger · Tan · Sunflower

HEX
#B2A37C
RGB
rgb(178, 163, 124)
HSL
hsl(43, 26%, 59%)
HSB
hsb(43, 30%, 70%)
CMYK
cmyk(0%, 8%, 30%, 30%)
Oklch
oklch(71.8% 0.056 89.5)

Traditional「Ginger」· Paint「Sunflower」· Creative Blush Sunrise

#C9BEB1

Goose Yellow · Silver · Warm Sun

HEX
#C9BEB1
RGB
rgb(201, 190, 177)
HSL
hsl(33, 18%, 74%)
HSB
hsb(33, 12%, 79%)
CMYK
cmyk(0%, 5%, 12%, 21%)
Oklch
oklch(80.7% 0.022 72.1)

Traditional「Goose Yellow」· Paint「Warm Sun」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

003643
420D00

Analogous

00422E
003643
001442

Triadic

003643
420035
354200

Split-Comp.

003643
420014
422E00

Tetradic

003643
2E0042
420D00
144200

Contrast Matrix WCAG 2.1 Contrast

003643
1C2223
6F7338
B2A37C
C9BEB1
—
1.2
Fail
2.6
Fail
5.2
AA
7.1
AAA
1.2
Fail
—
3.2
AA Large
6.5
AA
8.8
AAA
2.6
Fail
3.2
AA Large
—
2.0
Fail
2.7
Fail
5.2
AA
6.5
AA
2.0
Fail
—
1.4
Fail
7.1
AAA
8.8
AAA
2.7
Fail
1.4
Fail
—
White BG
13.1AAA
16.1AAA
5.0AA
2.5Fail
1.8Fail
Black BG
1.6Fail
1.3Fail
4.2AA Large
8.4AAA
11.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

171840
1F1F23
717146
ACAB85
C4C4B4

Deuteranopia

14103F
1E1E23
71704A
ACAE88
C5C6B5

Tritanopia

033D3D
1C2323
6F5254
B18D8F
C8B7B7

Achromatopsia

272727
202020
6B6B6B
A3A3A3
C0C0C0

Shades & Tints Shades & Tints

#003643

Dark
Light

#1C2223

Dark
Light

#6F7338

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #003643;
  --color-2: #1c2223;
  --color-3: #6f7338;
  --color-4: #b2a37c;
  --color-5: #c9beb1;
}

SCSS

$color-1: #003643;
$color-2: #1c2223;
$color-3: #6f7338;
$color-4: #b2a37c;
$color-5: #c9beb1;

TAILWIND

colors: {
  'brand-1': '#003643',
  'brand-2': '#1c2223',
  'brand-3': '#6f7338',
  'brand-4': '#b2a37c',
  'brand-5': '#c9beb1',
}

RGB Array

[0, 54, 67], [28, 34, 35], [111, 115, 56], [178, 163, 124], [201, 190, 177]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #003643, #1C2223, #6F7338, #B2A37C, #C9BEB1 is ideal for: tech websites, dark mode UIs, game UIs, 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: #003643; --color-2: #1c2223; --color-3: #6f7338; --color-4: #b2a37c; --color-5: #c9beb1. 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?

Dark tones work well as backgrounds; pair with light text for readability. Use the brightest color for CTA buttons and interactive elements. 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