← Back to Editor

#1C700D · #24A685 · #453F37 · #C4700A · #040504

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 Library

Color Details Color Details

#1C700D

Pine Green · DarkGreen · Forest Green

HEX
#1C700D
RGB
rgb(28, 112, 13)
HSL
hsl(111, 79%, 25%)
HSB
hsb(111, 88%, 44%)
CMYK
cmyk(75%, 0%, 88%, 56%)
Oklch
oklch(47.7% 0.150 141.2)

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

#24A685

Mineral Blue · MediumSeaGreen · Mint Ice

HEX
#24A685
RGB
rgb(36, 166, 133)
HSL
hsl(165, 64%, 40%)
HSB
hsb(165, 78%, 65%)
CMYK
cmyk(78%, 0%, 20%, 35%)
Oklch
oklch(65.0% 0.119 170.8)

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

#453F37

Ochre · DarkSlateGray · Cinnamon

HEX
#453F37
RGB
rgb(69, 63, 55)
HSL
hsl(34, 11%, 24%)
HSB
hsb(34, 20%, 27%)
CMYK
cmyk(0%, 9%, 20%, 73%)
Oklch
oklch(37.1% 0.016 75.1)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

#C4700A

Ochre · DarkGoldenRod · Amber Brown

HEX
#C4700A
RGB
rgb(196, 112, 10)
HSL
hsl(33, 90%, 40%)
HSB
hsb(33, 95%, 77%)
CMYK
cmyk(0%, 43%, 95%, 23%)
Oklch
oklch(62.6% 0.143 61.1)

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

#040504

Celadon · Black · Dark Green

HEX
#040504
RGB
rgb(4, 5, 4)
HSL
hsl(120, 11%, 2%)
HSB
hsb(120, 20%, 2%)
CMYK
cmyk(20%, 0%, 20%, 98%)
Oklch
oklch(11.2% 0.005 145.3)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1C700D
630D72

Analogous

4F720D
1C700D
0D7231

Triadic

1C700D
0D1C72
720D1C

Split-Comp.

1C700D
310D72
720D4F

Tetradic

1C700D
0D4F72
630D72
72310D

Contrast Matrix WCAG 2.1 Contrast

1C700D
24A685
453F37
C4700A
040504
—
2.0
Fail
1.7
Fail
1.7
Fail
3.3
AA Large
2.0
Fail
—
3.4
AA Large
1.2
Fail
6.7
AA
1.7
Fail
3.4
AA Large
—
2.8
Fail
2.0
Fail
1.7
Fail
1.2
Fail
2.8
Fail
—
5.5
AA
3.3
AA Large
6.7
AA
2.0
Fail
5.5
AA
—
White BG
6.2AA
3.1AA Large
10.4AAA
3.7AA Large
20.4AAA
Black BG
3.4AA Large
6.9AA
2.0Fail
5.7AA
1.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

404125
5C5D8D
424239
A09F23
040404

Deuteranopia

3C352B
554B8F
434339
A5AB29
040404

Tritanopia

20383C
2B9395
453A3B
C0363A
040404

Achromatopsia

4C4C4C
7B7B7B
404040
7D7D7D
050505

Shades & Tints Shades & Tints

#1C700D

Dark
Light

#24A685

Dark
Light

#453F37

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1c700d;
  --color-2: #24a685;
  --color-3: #453f37;
  --color-4: #c4700a;
  --color-5: #040504;
}

SCSS

$color-1: #1c700d;
$color-2: #24a685;
$color-3: #453f37;
$color-4: #c4700a;
$color-5: #040504;

TAILWIND

colors: {
  'brand-1': '#1c700d',
  'brand-2': '#24a685',
  'brand-3': '#453f37',
  'brand-4': '#c4700a',
  'brand-5': '#040504',
}

RGB Array

[28, 112, 13], [36, 166, 133], [69, 63, 55], [196, 112, 10], [4, 5, 4]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1C700D, #24A685, #453F37, #C4700A, #040504 is ideal for: tech websites, dark mode UIs, game UIs. 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: #1c700d; --color-2: #24a685; --color-3: #453f37; --color-4: #c4700a; --color-5: #040504. 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. 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