← Back to Editor

#1C6C67 · #3D9893 · #F4F6EC · #D6D394 · #A8C08E

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

#1C6C67

Mineral Blue · SeaGreen · Mint Ice

HEX
#1C6C67
RGB
rgb(28, 108, 103)
HSL
hsl(176, 59%, 27%)
HSB
hsb(176, 74%, 42%)
CMYK
cmyk(74%, 0%, 5%, 58%)
Oklch
oklch(48.3% 0.075 188.8)

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

#3D9893

Mineral Blue · CadetBlue · Mint Ice

HEX
#3D9893
RGB
rgb(61, 152, 147)
HSL
hsl(177, 43%, 42%)
HSB
hsb(177, 60%, 60%)
CMYK
cmyk(60%, 0%, 3%, 40%)
Oklch
oklch(62.4% 0.086 190.2)

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

#F4F6EC

Willow Green · Linen · Mint Green

HEX
#F4F6EC
RGB
rgb(244, 246, 236)
HSL
hsl(72, 36%, 95%)
HSB
hsb(72, 4%, 96%)
CMYK
cmyk(1%, 0%, 4%, 4%)
Oklch
oklch(96.9% 0.013 115.8)

Traditional「Willow Green」· Paint「Mint Green」· Creative Mint Breeze

#D6D394

Fresh Green · BurlyWood · Sunflower

HEX
#D6D394
RGB
rgb(214, 211, 148)
HSL
hsl(57, 45%, 71%)
HSB
hsb(57, 31%, 84%)
CMYK
cmyk(0%, 1%, 31%, 16%)
Oklch
oklch(85.4% 0.082 105.7)

Traditional「Fresh Green」· Paint「Sunflower」· Creative Lemon Fizz

#A8C08E

Willow Green · DarkSeaGreen · Apple Green

HEX
#A8C08E
RGB
rgb(168, 192, 142)
HSL
hsl(89, 28%, 65%)
HSB
hsb(89, 26%, 75%)
CMYK
cmyk(13%, 0%, 26%, 25%)
Oklch
oklch(77.7% 0.073 128.8)

Traditional「Willow Green」· Paint「Apple Green」· Creative Mint Breeze

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

1C6C67
6D1C22

Analogous

1C6D3F
1C6C67
1C4A6D

Triadic

1C6C67
681C6D
6D681C

Split-Comp.

1C6C67
6D1C4A
6D3F1C

Tetradic

1C6C67
3F1C6D
6D1C22
4A6D1C

Contrast Matrix WCAG 2.1 Contrast

1C6C67
3D9893
F4F6EC
D6D394
A8C08E
—
1.8
Fail
5.7
AA
4.0
AA Large
3.1
AA Large
1.8
Fail
—
3.1
AA Large
2.2
Fail
1.7
Fail
5.7
AA
3.1
AA Large
—
1.4
Fail
1.8
Fail
4.0
AA Large
2.2
Fail
1.4
Fail
—
1.3
Fail
3.1
AA Large
1.7
Fail
1.8
Fail
1.3
Fail
—
White BG
6.2AA
3.4AA Large
1.1Fail
1.5Fail
2.0Fail
Black BG
3.4AA Large
6.1AA
19.2AAA
13.6AAA
10.6AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F68
646594
F5F5EE
D5D5A3
B2B39A

Deuteranopia

3A3469
5F5895
F5F5EF
D5D5A7
B1AF9D

Tritanopia

206969
429595
F4F0F1
D6AFB2
A9A4A6

Achromatopsia

545454
7C7C7C
F4F4F4
CDCDCD
B3B3B3

Shades & Tints Shades & Tints

#1C6C67

Dark
Light

#3D9893

Dark
Light

#F4F6EC

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #1c6c67;
  --color-2: #3d9893;
  --color-3: #f4f6ec;
  --color-4: #d6d394;
  --color-5: #a8c08e;
}

SCSS

$color-1: #1c6c67;
$color-2: #3d9893;
$color-3: #f4f6ec;
$color-4: #d6d394;
$color-5: #a8c08e;

TAILWIND

colors: {
  'brand-1': '#1c6c67',
  'brand-2': '#3d9893',
  'brand-3': '#f4f6ec',
  'brand-4': '#d6d394',
  'brand-5': '#a8c08e',
}

RGB Array

[28, 108, 103], [61, 152, 147], [244, 246, 236], [214, 211, 148], [168, 192, 142]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #1C6C67, #3D9893, #F4F6EC, #D6D394, #A8C08E is ideal for: 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: #1c6c67; --color-2: #3d9893; --color-3: #f4f6ec; --color-4: #d6d394; --color-5: #a8c08e. 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?

Medium-brightness colors suit brand primary and accent colors. Use the darkest for text, lightest for backgrounds, and mid-tones for emphasis. 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