#2FB2DF + #278FAF + #1A6884 + #0E425A + #2D2925 - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarmCool

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#2FB2DF

Lake Blue · MediumTurquoise · Lake Green

HEX

#2FB2DF

RGB

rgb(47, 178, 223)

HSL

hsl(195, 73%, 53%)

HSB

hsb(195, 79%, 87%)

CMYK

cmyk(79%, 20%, 0%, 13%)

Oklch

oklch(71.5% 0.126 226.5)

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

#278FAF

Lake Blue · SteelBlue · Mint Ice

HEX

#278FAF

RGB

rgb(39, 143, 175)

HSL

hsl(194, 64%, 42%)

HSB

hsb(194, 78%, 69%)

CMYK

cmyk(78%, 18%, 0%, 31%)

Oklch

oklch(60.7% 0.102 223.5)

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

#1A6884

Lake Blue · Teal · Mint Ice

HEX

#1A6884

RGB

rgb(26, 104, 132)

HSL

hsl(196, 67%, 31%)

HSB

hsb(196, 80%, 52%)

CMYK

cmyk(80%, 21%, 0%, 48%)

Oklch

oklch(48.5% 0.084 227.2)

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

#0E425A

Lake Blue · DarkSlateGray · Peacock Green

HEX

#0E425A

RGB

rgb(14, 66, 90)

HSL

hsl(199, 73%, 20%)

HSB

hsb(199, 84%, 35%)

CMYK

cmyk(84%, 27%, 0%, 65%)

Oklch

oklch(35.8% 0.067 233.6)

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

#2D2925

Ochre · DarkSlateGray · Cinnamon

HEX

#2D2925

RGB

rgb(45, 41, 37)

HSL

hsl(30, 10%, 16%)

HSB

hsb(30, 18%, 18%)

CMYK

cmyk(0%, 9%, 18%, 82%)

Oklch

oklch(28.4% 0.009 67.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

2FB2DF

DF5B30

Analogous

30DFB3

2FB2DF

305BDF

Triadic

2FB2DF

DF30B3

B3DF30

Split-Comp.

2FB2DF

DF305B

DFB330

Tetradic

2FB2DF

B330DF

DF5B30

5BDF30

Contrast Matrix WCAG 2.1 Contrast

2FB2DF	278FAF	1A6884	0E425A	2D2925
—	1.5 Fail	2.5 Fail	4.4 AA Large	5.9 AA
1.5 Fail	—	1.7 Fail	2.9 Fail	3.9 AA Large
2.5 Fail	1.7 Fail	—	1.7 Fail	2.3 Fail
4.4 AA Large	2.9 Fail	1.7 Fail	—	1.3 Fail
5.9 AA	3.9 AA Large	2.3 Fail	1.3 Fail	—

White BG

2.5Fail

3.7AA Large

6.3AA

10.8AAA

14.4AAA

Black BG

8.6AAA

5.6AA

3.4AA Large

1.9Fail

1.5Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

6869D4

5455A7

3C3C7D

252554

2B2B26

Deuteranopia

6056D2

4E46A5

37317C

221E53

2C2C26

Tritanopia

36CCCA

2CA1A0

1E7877

11504F

2D2727

Achromatopsia

909090

747474

545454

353535

2A2A2A

Shades & Tints Shades & Tints

#2FB2DF

Dark

Light

#278FAF

Dark

Light

#1A6884

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #2fb2df;
  --color-2: #278faf;
  --color-3: #1a6884;
  --color-4: #0e425a;
  --color-5: #2d2925;
}

SCSS

$color-1: #2fb2df;
$color-2: #278faf;
$color-3: #1a6884;
$color-4: #0e425a;
$color-5: #2d2925;

TAILWIND

colors: {
  'brand-1': '#2fb2df',
  'brand-2': '#278faf',
  'brand-3': '#1a6884',
  'brand-4': '#0e425a',
  'brand-5': '#2d2925',
}

RGB Array

[47, 178, 223], [39, 143, 175], [26, 104, 132], [14, 66, 90], [45, 41, 37]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #2FB2DF, #278FAF, #1A6884, #0E425A, #2D2925 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: #2fb2df; --color-2: #278faf; --color-3: #1a6884; --color-4: #0e425a; --color-5: #2d2925. 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 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