#45BCC4 + #2F8F9C + #366F73 + #3B5254 + #2B2E30 · warm - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#45BCC4

Lake Blue · MediumTurquoise · Lake Green

HEX

#45BCC4

RGB

rgb(69, 188, 196)

HSL

hsl(184, 52%, 52%)

HSB

hsb(184, 65%, 77%)

CMYK

cmyk(65%, 4%, 0%, 23%)

Oklch

oklch(73.3% 0.105 201.5)

Traditional「Lake Blue」· Paint「Lake Green」· Creative Blush Sunrise

#2F8F9C

Lake Blue · SteelBlue · Mint Ice

HEX

#2F8F9C

RGB

rgb(47, 143, 156)

HSL

hsl(187, 54%, 40%)

HSB

hsb(187, 70%, 61%)

CMYK

cmyk(70%, 8%, 0%, 39%)

Oklch

oklch(60.1% 0.089 208.0)

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

#366F73

Slate Blue · SeaGreen · Mint Ice

HEX

#366F73

RGB

rgb(54, 111, 115)

HSL

hsl(184, 36%, 33%)

HSB

hsb(184, 53%, 45%)

CMYK

cmyk(53%, 3%, 0%, 55%)

Oklch

oklch(50.5% 0.060 201.5)

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

#3B5254

Slate Blue · DarkSlateGray · Mint Ice

HEX

#3B5254

RGB

rgb(59, 82, 84)

HSL

hsl(185, 17%, 28%)

HSB

hsb(185, 30%, 33%)

CMYK

cmyk(30%, 2%, 0%, 67%)

Oklch

oklch(42.1% 0.028 202.8)

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

#2B2E30

Dark Cyan · DarkSlateGray · Dark Stone

HEX

#2B2E30

RGB

rgb(43, 46, 48)

HSL

hsl(204, 5%, 18%)

HSB

hsb(204, 10%, 19%)

CMYK

cmyk(10%, 4%, 0%, 81%)

Oklch

oklch(29.9% 0.006 236.7)

Traditional「Dark Cyan」· Paint「Dark Stone」· Creative Midnight Shadow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

45BCC4

C44D45

Analogous

45C48D

45BCC4

457CC4

Triadic

45BCC4

C445BC

BCC445

Split-Comp.

45BCC4

C4457C

C48D45

Tetradic

45BCC4

8D45C4

C44D45

7CC445

Contrast Matrix WCAG 2.1 Contrast

45BCC4	2F8F9C	366F73	3B5254	2B2E30
—	1.7 Fail	2.5 Fail	3.7 AA Large	6.0 AA
1.7 Fail	—	1.5 Fail	2.2 Fail	3.6 AA Large
2.5 Fail	1.5 Fail	—	1.5 Fail	2.4 Fail
3.7 AA Large	2.2 Fail	1.5 Fail	—	1.6 Fail
6.0 AA	3.6 AA Large	2.4 Fail	1.6 Fail	—

White BG

2.3Fail

3.8AA Large

5.7AA

8.3AAA

13.7AAA

Black BG

9.2AAA

5.5AA

3.7AA Large

2.5Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

797AC2

595999

4F4F72

454554

2C2C30

Deuteranopia

7269C2

534C98

4B4772

444253

2C2C2F

Tritanopia

4BC1C0

349696

397171

3C5353

2B2F2F

Achromatopsia

999999

747474

5E5E5E

4B4B4B

2D2D2D

Shades & Tints Shades & Tints

#45BCC4

Dark

Light

#2F8F9C

Dark

Light

#366F73

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #45bcc4;
  --color-2: #2f8f9c;
  --color-3: #366f73;
  --color-4: #3b5254;
  --color-5: #2b2e30;
}

SCSS

$color-1: #45bcc4;
$color-2: #2f8f9c;
$color-3: #366f73;
$color-4: #3b5254;
$color-5: #2b2e30;

TAILWIND

colors: {
  'brand-1': '#45bcc4',
  'brand-2': '#2f8f9c',
  'brand-3': '#366f73',
  'brand-4': '#3b5254',
  'brand-5': '#2b2e30',
}

RGB Array

[69, 188, 196], [47, 143, 156], [54, 111, 115], [59, 82, 84], [43, 46, 48]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This warm-style palette of #45BCC4, #2F8F9C, #366F73, #3B5254, #2B2E30 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: #45bcc4; --color-2: #2f8f9c; --color-3: #366f73; --color-4: #3b5254; --color-5: #2b2e30. 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 warm-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