#F00A6D + #A14D6F + #F10334 + #80223C + #3D3334 · nature - Color Palette

Scene Recommendations Scene Recommendations

Emotion EMOTION

CalmOrganicGroundedWarm

Industry INDUSTRY

EcoWellnessOutdoor

UI Context UI CONTEXT

Brand WebsiteBlog

Color Details Color Details

#F00A6D

Dark Violet · DeepPink · Camellia

HEX

#F00A6D

RGB

rgb(240, 10, 109)

HSL

hsl(334, 92%, 49%)

HSB

hsb(334, 96%, 94%)

CMYK

cmyk(0%, 96%, 55%, 6%)

Oklch

oklch(61.5% 0.244 6.4)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#A14D6F

Dark Violet · DimGray · Camellia

HEX

#A14D6F

RGB

rgb(161, 77, 111)

HSL

hsl(336, 35%, 47%)

HSB

hsb(336, 52%, 63%)

CMYK

cmyk(0%, 52%, 31%, 37%)

Oklch

oklch(53.5% 0.117 356.3)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#F10334

Vermilion · Crimson · Passion Red

HEX

#F10334

RGB

rgb(241, 3, 52)

HSL

hsl(348, 98%, 48%)

HSB

hsb(348, 99%, 95%)

CMYK

cmyk(0%, 99%, 78%, 5%)

Oklch

oklch(60.5% 0.243 22.8)

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

#80223C

Dark Violet · Brown · Camellia

HEX

#80223C

RGB

rgb(128, 34, 60)

HSL

hsl(343, 58%, 32%)

HSB

hsb(343, 73%, 50%)

CMYK

cmyk(0%, 73%, 53%, 50%)

Oklch

oklch(40.9% 0.129 8.5)

Traditional「Dark Violet」· Paint「Camellia」· Creative Blush Sunrise

#3D3334

Crimson · DarkSlateGray · Dark Stone

HEX

#3D3334

RGB

rgb(61, 51, 52)

HSL

hsl(354, 9%, 22%)

HSB

hsb(354, 16%, 24%)

CMYK

cmyk(0%, 16%, 15%, 76%)

Oklch

oklch(33.2% 0.014 11.1)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

F00A6D

0AF08C

Analogous

F00AE1

F00A6D

F0190A

Triadic

F00A6D

6EF00A

0A6EF0

Split-Comp.

F00A6D

0AF019

0AE1F0

Tetradic

F00A6D

E1F00A

0AF08C

190AF0

Contrast Matrix WCAG 2.1 Contrast

F00A6D	A14D6F	F10334	80223C	3D3334
—	1.3 Fail	1.0 Fail	2.2 Fail	2.9 Fail
1.3 Fail	—	1.3 Fail	1.7 Fail	2.2 Fail
1.0 Fail	1.3 Fail	—	2.2 Fail	2.8 Fail
2.2 Fail	1.7 Fail	2.2 Fail	—	1.3 Fail
2.9 Fail	2.2 Fail	2.8 Fail	1.3 Fail	—

White BG

4.2AA Large

5.5AA

4.4AA Large

9.5AAA

12.2AAA

Black BG

5.0AA

3.8AA Large

4.8AA

2.2Fail

1.7Fail

Color Blindness Simulation Color Blindness Simulation

Protanopia

8C8A55

7D7C67

8A8828

575636

393934

Deuteranopia

9AAB4F

828865

98AA25

5D6434

393A34

Tritanopia

E5423E

9D605F

E51F1D

7B3130

3C3434

Achromatopsia

5A5A5A

6A6A6A

505050

414141

363636

Shades & Tints Shades & Tints

#F00A6D

Dark

Light

#A14D6F

Dark

Light

#F10334

Dark

Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #f00a6d;
  --color-2: #a14d6f;
  --color-3: #f10334;
  --color-4: #80223c;
  --color-5: #3d3334;
}

SCSS

$color-1: #f00a6d;
$color-2: #a14d6f;
$color-3: #f10334;
$color-4: #80223c;
$color-5: #3d3334;

TAILWIND

colors: {
  'brand-1': '#f00a6d',
  'brand-2': '#a14d6f',
  'brand-3': '#f10334',
  'brand-4': '#80223c',
  'brand-5': '#3d3334',
}

RGB Array

[240, 10, 109], [161, 77, 111], [241, 3, 52], [128, 34, 60], [61, 51, 52]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This nature-style palette of #F00A6D, #A14D6F, #F10334, #80223C, #3D3334 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: #f00a6d; --color-2: #a14d6f; --color-3: #f10334; --color-4: #80223c; --color-5: #3d3334. 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