← Back to Editor

#FF3D2D · #F1EFE3 · #81BDCF · #C2D9D0 · #2DB5B3

A 5-color palette palette · Complete color analysis and application guide

Scene Recommendations Scene Recommendations

Emotion EMOTION

AiryCleanWarmCool

Industry INDUSTRY

HealthcareSaaS

UI Context UI CONTEXT

WorkspaceReadingData Visualization

Color Details Color Details

#FF3D2D

Vermilion · OrangeRed · Passion Red

HEX
#FF3D2D
RGB
rgb(255, 61, 45)
HSL
hsl(5, 100%, 59%)
HSB
hsb(5, 82%, 100%)
CMYK
cmyk(0%, 76%, 82%, 0%)
Oklch
oklch(65.5% 0.231 29.5)

Traditional「Vermilion」· Paint「Passion Red」· Creative Blush Sunrise

#F1EFE3

Fresh Green · Linen · Lemon Cream

HEX
#F1EFE3
RGB
rgb(241, 239, 227)
HSL
hsl(51, 33%, 92%)
HSB
hsb(51, 6%, 95%)
CMYK
cmyk(0%, 1%, 6%, 5%)
Oklch
oklch(95.0% 0.016 99.0)

Traditional「Fresh Green」· Paint「Lemon Cream」· Creative Lemon Fizz

#81BDCF

Sky Blue · SkyBlue · Lake Green

HEX
#81BDCF
RGB
rgb(129, 189, 207)
HSL
hsl(194, 45%, 66%)
HSB
hsb(194, 38%, 81%)
CMYK
cmyk(38%, 9%, 0%, 19%)
Oklch
oklch(76.4% 0.067 218.6)

Traditional「Sky Blue」· Paint「Lake Green」· Creative Arctic Pool

#C2D9D0

Jade · LightGray · Mint Green

HEX
#C2D9D0
RGB
rgb(194, 217, 208)
HSL
hsl(157, 23%, 81%)
HSB
hsb(157, 11%, 85%)
CMYK
cmyk(11%, 0%, 4%, 15%)
Oklch
oklch(86.6% 0.027 170.2)

Traditional「Jade」· Paint「Mint Green」· Creative Arctic Pool

#2DB5B3

Mineral Blue · LightSeaGreen · Mint Ice

HEX
#2DB5B3
RGB
rgb(45, 181, 179)
HSL
hsl(179, 60%, 44%)
HSB
hsb(179, 75%, 71%)
CMYK
cmyk(75%, 0%, 1%, 29%)
Oklch
oklch(70.4% 0.111 193.4)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF3D2D
2EEEFF

Analogous

FF2E85
FF3D2D
FFA82E

Triadic

FF3D2D
2EFF3F
3F2EFF

Split-Comp.

FF3D2D
2EFFA8
2E85FF

Tetradic

FF3D2D
85FF2E
2EEEFF
A82EFF

Contrast Matrix WCAG 2.1 Contrast

FF3D2D
F1EFE3
81BDCF
C2D9D0
2DB5B3
—
3.1
AA Large
1.7
Fail
2.4
Fail
1.4
Fail
3.1
AA Large
—
1.8
Fail
1.3
Fail
2.2
Fail
1.7
Fail
1.8
Fail
—
1.4
Fail
1.2
Fail
2.4
Fail
1.3
Fail
1.4
Fail
—
1.7
Fail
1.4
Fail
2.2
Fail
1.2
Fail
1.7
Fail
—
White BG
3.5AA Large
1.2Fail
2.1Fail
1.5Fail
2.5Fail
Black BG
6.0AA
18.2AAA
10.1AAA
14.1AAA
8.4AAA

Color Blindness Simulation Color Blindness Simulation

Protanopia

ABA931
F0F0E6
9B9CCB
CCCCD2
6869B3

Deuteranopia

B6C532
F0F0E7
9893CA
CBC9D3
6056B4

Tritanopia

F53435
F1E8E9
84C7C6
C3D4D4
34B4B4

Achromatopsia

757575
EEEEEE
ADADAD
D1D1D1
8C8C8C

Shades & Tints Shades & Tints

#FF3D2D

Dark
Light

#F1EFE3

Dark
Light

#81BDCF

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff3d2d;
  --color-2: #f1efe3;
  --color-3: #81bdcf;
  --color-4: #c2d9d0;
  --color-5: #2db5b3;
}

SCSS

$color-1: #ff3d2d;
$color-2: #f1efe3;
$color-3: #81bdcf;
$color-4: #c2d9d0;
$color-5: #2db5b3;

TAILWIND

colors: {
  'brand-1': '#ff3d2d',
  'brand-2': '#f1efe3',
  'brand-3': '#81bdcf',
  'brand-4': '#c2d9d0',
  'brand-5': '#2db5b3',
}

RGB Array

[255, 61, 45], [241, 239, 227], [129, 189, 207], [194, 217, 208], [45, 181, 179]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This general-style palette of #FF3D2D, #F1EFE3, #81BDCF, #C2D9D0, #2DB5B3 is ideal for: health products, baby brands, fresh-style blogs, 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: #ff3d2d; --color-2: #f1efe3; --color-3: #81bdcf; --color-4: #c2d9d0; --color-5: #2db5b3. 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?

Light tones suit backgrounds; use dark colors for body text. Mid-tones work for card backgrounds or dividers to add depth. 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