#2B99A1 + #26858C + #216E7A + #1C5F69 + #4A4136 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarmCool

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#2B99A1

Lake Blue · LightSeaGreen · Mint Ice

HEX

#2B99A1

RGB

rgb(43, 153, 161)

HSL

hsl(184, 58%, 40%)

HSB

hsb(184, 73%, 63%)

CMYK

cmyk(73%, 5%, 0%, 37%)

Oklch

oklch(62.7% 0.095 202.3)

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

#26858C

Lake Blue · Teal · Mint Ice

HEX

#26858C

RGB

rgb(38, 133, 140)

HSL

hsl(184, 57%, 35%)

HSB

hsb(184, 73%, 55%)

CMYK

cmyk(73%, 5%, 0%, 45%)

Oklch

oklch(56.6% 0.085 202.3)

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

#216E7A

Lake Blue · Teal · Mint Ice

HEX

#216E7A

RGB

rgb(33, 110, 122)

HSL

hsl(188, 57%, 30%)

HSB

hsb(188, 73%, 48%)

CMYK

cmyk(73%, 10%, 0%, 52%)

Oklch

oklch(49.8% 0.075 209.9)

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

#1C5F69

Lake Blue · DarkSlateGray · Mint Ice

HEX

#1C5F69

RGB

rgb(28, 95, 105)

HSL

hsl(188, 58%, 26%)

HSB

hsb(188, 73%, 41%)

CMYK

cmyk(73%, 10%, 0%, 59%)

Oklch

oklch(44.9% 0.067 209.3)

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

#4A4136

Ochre · DarkSlateGray · Cinnamon

HEX

#4A4136

RGB

rgb(74, 65, 54)

HSL

hsl(33, 16%, 25%)

HSB

hsb(33, 27%, 29%)

CMYK

cmyk(0%, 12%, 27%, 71%)

Oklch

oklch(38.1% 0.022 72.7)

Traditional「Ochre」· Paint「Cinnamon」· Creative Blush Sunrise

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2B99A1

A1332B

Analogous

2BA16E

2B99A1

2B5EA1

Triadic

2B99A1

A12B99

99A12B

Split-Comp.

2B99A1

A12B5E

A16E2B

Tetradic

2B99A1

6E2BA1

A1332B

5EA12B

Contrast Matrix WCAG 2.1 Contrast

2B99A1	26858C	216E7A	1C5F69	4A4136
—	1.3 Fail	1.7 Fail	2.1 Fail	2.9 Fail
1.3 Fail	—	1.3 Fail	1.7 Fail	2.3 Fail
1.7 Fail	1.3 Fail	—	1.2 Fail	1.7 Fail
2.1 Fail	1.7 Fail	1.2 Fail	—	1.4 Fail
2.9 Fail	2.3 Fail	1.7 Fail	1.4 Fail	—

White BG

3.4AA Large

4.4AA Large

5.9AA

7.3AAA

10.0AAA

Black BG

6.2AA

4.8AA

3.6AA Large

2.9Fail

2.1Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

5B5C9F

4F508A

424377

393A67

464639

Deuteranopia

544C9F

4A438A

3E3876

353066

474739

Tritanopia

319E9D

2B8989

257574

1F6564

4A3B3B

Achromatopsia

797979

696969

585858

4C4C4C

424242

Shades & Tints Shades & Tints

#2B99A1

Dark

Light

#26858C

Dark

Light

#216E7A

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2b99a1;
  --color-2: #26858c;
  --color-3: #216e7a;
  --color-4: #1c5f69;
  --color-5: #4a4136;
}

SCSS

$color-1: #2b99a1;
$color-2: #26858c;
$color-3: #216e7a;
$color-4: #1c5f69;
$color-5: #4a4136;

TAILWIND

colors: {
  'brand-1': '#2b99a1',
  'brand-2': '#26858c',
  'brand-3': '#216e7a',
  'brand-4': '#1c5f69',
  'brand-5': '#4a4136',
}

RGB Array

[43, 153, 161], [38, 133, 140], [33, 110, 122], [28, 95, 105], [74, 65, 54]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #2B99A1, #26858C, #216E7A, #1C5F69, #4A4136 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: #2b99a1; --color-2: #26858c; --color-3: #216e7a; --color-4: #1c5f69; --color-5: #4a4136. 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 nature-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