← Back to Editor

#262A33 · #498C8B · #24F7CE · #C1E3D9 · #E0DDD8

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

#262A33

Indigo · DarkSlateGray · Deep Sea Blue

HEX
#262A33
RGB
rgb(38, 42, 51)
HSL
hsl(222, 15%, 17%)
HSB
hsb(222, 25%, 20%)
CMYK
cmyk(25%, 18%, 0%, 80%)
Oklch
oklch(28.5% 0.018 266.3)

Traditional「Indigo」· Paint「Deep Sea Blue」· Creative Blush Sunrise

#498C8B

Mineral Blue · CadetBlue · Mint Ice

HEX
#498C8B
RGB
rgb(73, 140, 139)
HSL
hsl(179, 31%, 42%)
HSB
hsb(179, 48%, 55%)
CMYK
cmyk(48%, 0%, 1%, 45%)
Oklch
oklch(59.6% 0.068 194.2)

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

#24F7CE

Mineral Blue · Turquoise · Lake Green

HEX
#24F7CE
RGB
rgb(36, 247, 206)
HSL
hsl(168, 93%, 55%)
HSB
hsb(168, 85%, 97%)
CMYK
cmyk(85%, 0%, 17%, 3%)
Oklch
oklch(87.3% 0.161 174.4)

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

#C1E3D9

Jade · LightGray · Glacier Blue

HEX
#C1E3D9
RGB
rgb(193, 227, 217)
HSL
hsl(162, 38%, 82%)
HSB
hsb(162, 15%, 89%)
CMYK
cmyk(15%, 0%, 4%, 11%)
Oklch
oklch(88.8% 0.038 175.7)

Traditional「Jade」· Paint「Glacier Blue」· Creative Arctic Pool

#E0DDD8

Goose Yellow · LightGray · Peach Orange

HEX
#E0DDD8
RGB
rgb(224, 221, 216)
HSL
hsl(38, 11%, 86%)
HSB
hsb(38, 4%, 88%)
CMYK
cmyk(0%, 1%, 4%, 12%)
Oklch
oklch(89.8% 0.008 80.7)

Traditional「Goose Yellow」· Paint「Peach Orange」· Creative Honey Glow

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

262A33
322E25

Analogous

252F32
262A33
272532

Triadic

262A33
322529
293225

Split-Comp.

262A33
322725
2F3225

Tetradic

262A33
32252F
322E25
253227

Contrast Matrix WCAG 2.1 Contrast

262A33
498C8B
24F7CE
C1E3D9
E0DDD8
—
3.7
AA Large
10.4
AAA
10.4
AAA
10.6
AAA
3.7
AA Large
—
2.8
Fail
2.8
Fail
2.9
Fail
10.4
AAA
2.8
Fail
—
1.0
Fail
1.0
Fail
10.4
AAA
2.8
Fail
1.0
Fail
—
1.0
Fail
10.6
AAA
2.9
Fail
1.0
Fail
1.0
Fail
—
White BG
14.4AAA
3.9AA Large
1.4Fail
1.4Fail
1.4Fail
Black BG
1.5Fail
5.4AA
15.3AAA
15.3AAA
15.5AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

282831
66678B
7F81D8
D0D0DB
DFDFD9

Deuteranopia

282730
625D8B
7363DA
CECBDC
DFDFDA

Tritanopia

262F2F
4C8B8B
2FE0E1
C3DDDE
E0DADA

Achromatopsia

2A2A2A
787878
B3B3B3
D8D8D8
DDDDDD

Shades & Tints Shades & Tints

#262A33

Dark
Light

#498C8B

Dark
Light

#24F7CE

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #262a33;
  --color-2: #498c8b;
  --color-3: #24f7ce;
  --color-4: #c1e3d9;
  --color-5: #e0ddd8;
}

SCSS

$color-1: #262a33;
$color-2: #498c8b;
$color-3: #24f7ce;
$color-4: #c1e3d9;
$color-5: #e0ddd8;

TAILWIND

colors: {
  'brand-1': '#262a33',
  'brand-2': '#498c8b',
  'brand-3': '#24f7ce',
  'brand-4': '#c1e3d9',
  'brand-5': '#e0ddd8',
}

RGB Array

[38, 42, 51], [73, 140, 139], [36, 247, 206], [193, 227, 217], [224, 221, 216]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #262A33, #498C8B, #24F7CE, #C1E3D9, #E0DDD8 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: #262a33; --color-2: #498c8b; --color-3: #24f7ce; --color-4: #c1e3d9; --color-5: #e0ddd8. 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