← Back to Editor

#7CA185 · #3D918D · #0F807A · #111624 · #D44617

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

#7CA185

Celadon · LightSlateGray · Olive Green

HEX
#7CA185
RGB
rgb(124, 161, 133)
HSL
hsl(135, 16%, 56%)
HSB
hsb(135, 23%, 63%)
CMYK
cmyk(23%, 0%, 17%, 37%)
Oklch
oklch(67.3% 0.058 152.1)

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

#3D918D

Mineral Blue · CadetBlue · Mint Ice

HEX
#3D918D
RGB
rgb(61, 145, 141)
HSL
hsl(177, 41%, 40%)
HSB
hsb(177, 58%, 57%)
CMYK
cmyk(58%, 0%, 3%, 43%)
Oklch
oklch(60.4% 0.081 190.9)

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

#0F807A

Mineral Blue · Teal · Mint Ice

HEX
#0F807A
RGB
rgb(15, 128, 122)
HSL
hsl(177, 79%, 28%)
HSB
hsb(177, 88%, 50%)
CMYK
cmyk(88%, 0%, 5%, 50%)
Oklch
oklch(54.2% 0.091 188.9)

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

#111624

Indigo · Black · Deep Sea Blue

HEX
#111624
RGB
rgb(17, 22, 36)
HSL
hsl(224, 36%, 10%)
HSB
hsb(224, 53%, 14%)
CMYK
cmyk(53%, 39%, 0%, 86%)
Oklch
oklch(20.2% 0.029 268.7)

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

#D44617

Tangerine · Chocolate · Amber Brown

HEX
#D44617
RGB
rgb(212, 70, 23)
HSL
hsl(15, 80%, 46%)
HSB
hsb(15, 89%, 83%)
CMYK
cmyk(0%, 67%, 89%, 17%)
Oklch
oklch(59.0% 0.186 36.8)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

7CA185
A17D98

Analogous

86A17D
7CA185
7DA198

Triadic

7CA185
867DA1
A1867D

Split-Comp.

7CA185
987DA1
A17D86

Tetradic

7CA185
7D86A1
A17D98
A1987D

Contrast Matrix WCAG 2.1 Contrast

7CA185
3D918D
0F807A
111624
D44617
—
1.3
Fail
1.7
Fail
6.3
AA
1.6
Fail
1.3
Fail
—
1.3
Fail
4.8
AA
1.2
Fail
1.7
Fail
1.3
Fail
—
3.8
AA Large
1.1
Fail
6.3
AA
4.8
AA
3.8
AA Large
—
4.0
AA Large
1.6
Fail
1.2
Fail
1.1
Fail
4.0
AA Large
—
White BG
2.9Fail
3.7AA Large
4.8AA
18.0AAA
4.5AA Large
Black BG
7.3AAA
5.6AA
4.4AA Large
1.2Fail
4.7AA

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8C8C
61628E
40417B
131321
979522

Deuteranopia

8A878D
5D568E
39317C
131320
9FA925

Tritanopia

7E9192
418F8F
157D7D
111E1D
CD2B2D

Achromatopsia

939393
777777
5E5E5E
161616
6B6B6B

Shades & Tints Shades & Tints

#7CA185

Dark
Light

#3D918D

Dark
Light

#0F807A

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #7ca185;
  --color-2: #3d918d;
  --color-3: #0f807a;
  --color-4: #111624;
  --color-5: #d44617;
}

SCSS

$color-1: #7ca185;
$color-2: #3d918d;
$color-3: #0f807a;
$color-4: #111624;
$color-5: #d44617;

TAILWIND

colors: {
  'brand-1': '#7ca185',
  'brand-2': '#3d918d',
  'brand-3': '#0f807a',
  'brand-4': '#111624',
  'brand-5': '#d44617',
}

RGB Array

[124, 161, 133], [61, 145, 141], [15, 128, 122], [17, 22, 36], [212, 70, 23]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #7CA185, #3D918D, #0F807A, #111624, #D44617 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: #7ca185; --color-2: #3d918d; --color-3: #0f807a; --color-4: #111624; --color-5: #d44617. 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