#789E7F + #7D061E + #5B7D6A + #2E5959 + #132D45 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#789E7F

Celadon · Gray · Olive Green

HEX

#789E7F

RGB

rgb(120, 158, 127)

HSL

hsl(131, 16%, 55%)

HSB

hsb(131, 24%, 62%)

CMYK

cmyk(24%, 0%, 20%, 38%)

Oklch

oklch(66.2% 0.062 150.0)

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

#7D061E

Vermilion · Maroon · Wine Red

HEX

#7D061E

RGB

rgb(125, 6, 30)

HSL

hsl(348, 91%, 26%)

HSB

hsb(348, 95%, 49%)

CMYK

cmyk(0%, 95%, 76%, 51%)

Oklch

oklch(37.6% 0.147 20.0)

Traditional「Vermilion」· Paint「Wine Red」· Creative Blush Sunrise

#5B7D6A

Celadon · DimGray · Olive Green

HEX

#5B7D6A

RGB

rgb(91, 125, 106)

HSL

hsl(146, 16%, 42%)

HSB

hsb(146, 27%, 49%)

CMYK

cmyk(27%, 0%, 15%, 51%)

Oklch

oklch(55.8% 0.049 159.8)

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

#2E5959

Slate Blue · DarkSlateGray · Mint Ice

HEX

#2E5959

RGB

rgb(46, 89, 89)

HSL

hsl(180, 32%, 26%)

HSB

hsb(180, 48%, 35%)

CMYK

cmyk(48%, 0%, 0%, 65%)

Oklch

oklch(43.3% 0.048 195.5)

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

#132D45

Lake Blue · DarkSlateGray · Deep Sea Blue

HEX

#132D45

RGB

rgb(19, 45, 69)

HSL

hsl(209, 57%, 17%)

HSB

hsb(209, 72%, 27%)

CMYK

cmyk(72%, 35%, 0%, 73%)

Oklch

oklch(29.0% 0.055 248.5)

Traditional「Lake Blue」· Paint「Deep Sea Blue」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

789E7F

9F7A98

Analogous

869F7A

789E7F

7A9F93

Triadic

789E7F

817A9F

9F817A

Split-Comp.

789E7F

937A9F

9F7A86

Tetradic

789E7F

7A869F

9F7A98

9F937A

Contrast Matrix WCAG 2.1 Contrast

789E7F	7D061E	5B7D6A	2E5959	132D45
—	3.6 AA Large	1.5 Fail	2.6 Fail	4.7 AA
3.6 AA Large	—	2.4 Fail	1.4 Fail	1.3 Fail
1.5 Fail	2.4 Fail	—	1.7 Fail	3.1 AA Large
2.6 Fail	1.4 Fail	1.7 Fail	—	1.8 Fail
4.7 AA	1.3 Fail	3.1 AA Large	1.8 Fail	—

White BG

3.0AA Large

11.0AAA

4.6AA

7.8AAA

14.1AAA

Black BG

7.0AA

1.9Fail

4.6AA

2.7Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

888987

494818

6A6A6F

414159

1E1E3F

Deuteranopia

868388

505917

686570

3E3B59

1D1B3E

Tritanopia

7A8C8E

771413

5D7273

305959

143B3A

Achromatopsia

8F8F8F

2C2C2C

717171

4C4C4C

282828

Shades & Tints Shades & Tints

#789E7F

Dark

Light

#7D061E

Dark

Light

#5B7D6A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #789e7f;
  --color-2: #7d061e;
  --color-3: #5b7d6a;
  --color-4: #2e5959;
  --color-5: #132d45;
}

SCSS

$color-1: #789e7f;
$color-2: #7d061e;
$color-3: #5b7d6a;
$color-4: #2e5959;
$color-5: #132d45;

TAILWIND

colors: {
  'brand-1': '#789e7f',
  'brand-2': '#7d061e',
  'brand-3': '#5b7d6a',
  'brand-4': '#2e5959',
  'brand-5': '#132d45',
}

RGB Array

[120, 158, 127], [125, 6, 30], [91, 125, 106], [46, 89, 89], [19, 45, 69]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #789E7F, #7D061E, #5B7D6A, #2E5959, #132D45 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: #789e7f; --color-2: #7d061e; --color-3: #5b7d6a; --color-4: #2e5959; --color-5: #132d45. 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