#197D70 + #258F51 + #42A331 + #163310 + #436115 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#197D70

Mineral Blue · Teal · Mint Ice

HEX

#197D70

RGB

rgb(25, 125, 112)

HSL

hsl(172, 67%, 29%)

HSB

hsb(172, 80%, 49%)

CMYK

cmyk(80%, 0%, 10%, 51%)

Oklch

oklch(53.2% 0.089 181.7)

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

#258F51

Pine Green · SeaGreen · Forest Green

HEX

#258F51

RGB

rgb(37, 143, 81)

HSL

hsl(145, 59%, 35%)

HSB

hsb(145, 74%, 56%)

CMYK

cmyk(74%, 0%, 43%, 44%)

Oklch

oklch(57.6% 0.134 152.8)

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

#42A331

Pine Green · ForestGreen · Olive Green

HEX

#42A331

RGB

rgb(66, 163, 49)

HSL

hsl(111, 54%, 42%)

HSB

hsb(111, 70%, 64%)

CMYK

cmyk(60%, 0%, 70%, 36%)

Oklch

oklch(63.4% 0.176 140.9)

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

#163310

Pine Green · DarkGreen · Dark Green

HEX

#163310

RGB

rgb(22, 51, 16)

HSL

hsl(110, 52%, 13%)

HSB

hsb(110, 69%, 20%)

CMYK

cmyk(57%, 0%, 69%, 80%)

Oklch

oklch(28.9% 0.069 140.3)

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

#436115

Grass Green · DarkOliveGreen · Forest Green

HEX

#436115

RGB

rgb(67, 97, 21)

HSL

hsl(84, 64%, 23%)

HSB

hsb(84, 78%, 38%)

CMYK

cmyk(31%, 0%, 78%, 62%)

Oklch

oklch(45.3% 0.107 129.0)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

197D70

7B1826

Analogous

187B3D

197D70

18577B

Triadic

197D70

6E187B

7B6E18

Split-Comp.

197D70

7B1857

7B3D18

Tetradic

197D70

3D187B

7B1826

577B18

Contrast Matrix WCAG 2.1 Contrast

197D70	258F51	42A331	163310	436115
—	1.2 Fail	1.5 Fail	2.8 Fail	1.4 Fail
1.2 Fail	—	1.3 Fail	3.4 AA Large	1.7 Fail
1.5 Fail	1.3 Fail	—	4.3 AA Large	2.2 Fail
2.8 Fail	3.4 AA Large	4.3 AA Large	—	2.0 Fail
1.4 Fail	1.7 Fail	2.2 Fail	2.0 Fail	—

White BG

5.0AA

4.1AA Large

3.2AA Large

13.9AAA

7.1AAA

Black BG

4.2AA Large

5.1AA

6.5AA

1.5Fail

3.0Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

444573

535460

6C6D4D

232318

505027

Deuteranopia

3F3774

4D4564

665F53

211F1B

4E4C2C

Tritanopia

1E7676

2A6C6E

476267

171F21

453639

Achromatopsia

5E5E5E

686868

797979

262626

4F4F4F

Shades & Tints Shades & Tints

#197D70

Dark

Light

#258F51

Dark

Light

#42A331

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #197d70;
  --color-2: #258f51;
  --color-3: #42a331;
  --color-4: #163310;
  --color-5: #436115;
}

SCSS

$color-1: #197d70;
$color-2: #258f51;
$color-3: #42a331;
$color-4: #163310;
$color-5: #436115;

TAILWIND

colors: {
  'brand-1': '#197d70',
  'brand-2': '#258f51',
  'brand-3': '#42a331',
  'brand-4': '#163310',
  'brand-5': '#436115',
}

RGB Array

[25, 125, 112], [37, 143, 81], [66, 163, 49], [22, 51, 16], [67, 97, 21]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #197D70, #258F51, #42A331, #163310, #436115 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: #197d70; --color-2: #258f51; --color-3: #42a331; --color-4: #163310; --color-5: #436115. 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