#206785 + #3F898A + #69AF95 + #9BC998 + #9EC27A - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#206785

Lake Blue · Teal · Mint Ice

HEX

#206785

RGB

rgb(32, 103, 133)

HSL

hsl(198, 61%, 32%)

HSB

hsb(198, 76%, 52%)

CMYK

cmyk(76%, 23%, 0%, 48%)

Oklch

oklch(48.4% 0.083 230.5)

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

#3F898A

Slate Blue · SteelBlue · Mint Ice

HEX

#3F898A

RGB

rgb(63, 137, 138)

HSL

hsl(181, 37%, 39%)

HSB

hsb(181, 54%, 54%)

CMYK

cmyk(54%, 1%, 0%, 46%)

Oklch

oklch(58.4% 0.073 196.5)

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

#69AF95

Mineral Blue · CadetBlue · Olive Green

HEX

#69AF95

RGB

rgb(105, 175, 149)

HSL

hsl(158, 30%, 55%)

HSB

hsb(158, 40%, 69%)

CMYK

cmyk(40%, 0%, 15%, 31%)

Oklch

oklch(70.0% 0.081 168.3)

Traditional「Mineral Blue」· Paint「Olive Green」· Creative Blush Sunrise

#9BC998

Celadon · DarkSeaGreen · Apple Green

HEX

#9BC998

RGB

rgb(155, 201, 152)

HSL

hsl(116, 31%, 69%)

HSB

hsb(116, 24%, 79%)

CMYK

cmyk(23%, 0%, 24%, 21%)

Oklch

oklch(79.0% 0.084 143.2)

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

#9EC27A

Celadon · DarkSeaGreen · Apple Green

HEX

#9EC27A

RGB

rgb(158, 194, 122)

HSL

hsl(90, 37%, 62%)

HSB

hsb(90, 37%, 76%)

CMYK

cmyk(19%, 0%, 37%, 24%)

Oklch

oklch(77.0% 0.105 130.2)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

206785

833E20

Analogous

20836F

206785

203483

Triadic

206785

832066

668320

Split-Comp.

206785

832034

836F20

Tetradic

206785

6F2083

833E20

348320

Contrast Matrix WCAG 2.1 Contrast

206785	3F898A	69AF95	9BC998	9EC27A
—	1.5 Fail	2.4 Fail	3.4 AA Large	3.1 AA Large
1.5 Fail	—	1.6 Fail	2.2 Fail	2.0 Fail
2.4 Fail	1.6 Fail	—	1.4 Fail	1.3 Fail
3.4 AA Large	2.2 Fail	1.4 Fail	—	1.1 Fail
3.1 AA Large	2.0 Fail	1.3 Fail	1.1 Fail	—

White BG

6.3AA

4.1AA Large

2.6Fail

1.9Fail

2.0Fail

Black BG

3.3AA Large

5.2AA

8.2AAA

11.2AAA

10.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

3F3F7E

5F608A

87889B

AFAFA4

AEAE8B

Deuteranopia

3B357C

5B558A

837E9D

ACA9A7

ACA990

Tritanopia

247877

438A8A

6DA0A1

9DADAF

A0999C

Achromatopsia

555555

737373

979797

B6B6B6

AFAFAF

Shades & Tints Shades & Tints

#206785

Dark

Light

#3F898A

Dark

Light

#69AF95

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #206785;
  --color-2: #3f898a;
  --color-3: #69af95;
  --color-4: #9bc998;
  --color-5: #9ec27a;
}

SCSS

$color-1: #206785;
$color-2: #3f898a;
$color-3: #69af95;
$color-4: #9bc998;
$color-5: #9ec27a;

TAILWIND

colors: {
  'brand-1': '#206785',
  'brand-2': '#3f898a',
  'brand-3': '#69af95',
  'brand-4': '#9bc998',
  'brand-5': '#9ec27a',
}

RGB Array

[32, 103, 133], [63, 137, 138], [105, 175, 149], [155, 201, 152], [158, 194, 122]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #206785, #3F898A, #69AF95, #9BC998, #9EC27A is ideal for: corporate websites, product showcases, portfolios. 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: #206785; --color-2: #3f898a; --color-3: #69af95; --color-4: #9bc998; --color-5: #9ec27a. 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. 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