← Back to Editor

#FF282D · #798265 · #9C7262 · #7D7C7C · #DD0048

spring

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

Scene Recommendations Scene Recommendations

Emotion EMOTION

HarmoniousVersatileWarm

Industry INDUSTRY

E-commerceBusiness

UI Context UI CONTEXT

Web PageComponent Library

Color Details Color Details

#FF282D

Vermilion · Crimson · Passion Red

HEX
#FF282D
RGB
rgb(255, 40, 45)
HSL
hsl(359, 100%, 58%)
HSB
hsb(359, 84%, 100%)
CMYK
cmyk(0%, 84%, 82%, 0%)
Oklch
oklch(64.2% 0.244 26.9)

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

#798265

Grass Green · Gray · Olive Green

HEX
#798265
RGB
rgb(121, 130, 101)
HSL
hsl(79, 13%, 45%)
HSB
hsb(79, 22%, 51%)
CMYK
cmyk(7%, 0%, 22%, 49%)
Oklch
oklch(59.1% 0.044 121.8)

Traditional「Grass Green」· Paint「Olive Green」· Creative Blush Sunrise

#9C7262

Tangerine · Gray · Amber Brown

HEX
#9C7262
RGB
rgb(156, 114, 98)
HSL
hsl(17, 23%, 50%)
HSB
hsb(17, 37%, 61%)
CMYK
cmyk(0%, 27%, 37%, 39%)
Oklch
oklch(59.0% 0.059 41.8)

Traditional「Tangerine」· Paint「Amber Brown」· Creative Blush Sunrise

#7D7C7C

Ink Gray · Gray · Warm Gray

HEX
#7D7C7C
RGB
rgb(125, 124, 124)
HSL
hsl(0, 0%, 49%)
HSB
hsb(0, 1%, 49%)
CMYK
cmyk(0%, 1%, 1%, 51%)
Oklch
oklch(58.7% 0.001 17.2)

Traditional「Ink Gray」· Paint「Warm Gray」· Creative Urban Concrete

#DD0048

Dark Violet · Crimson · Camellia

HEX
#DD0048
RGB
rgb(221, 0, 72)
HSL
hsl(340, 100%, 43%)
HSB
hsb(340, 100%, 87%)
CMYK
cmyk(0%, 100%, 67%, 13%)
Oklch
oklch(57.0% 0.228 15.6)

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

Color Harmonies Color Harmonies

Based on color wheel theory, calculated from primary color

Complementary

FF282D
29FFFB

Analogous

FF2997
FF282D
FF9029

Triadic

FF282D
2CFF29
292CFF

Split-Comp.

FF282D
29FF90
2997FF

Tetradic

FF282D
97FF29
29FFFB
9029FF

Contrast Matrix WCAG 2.1 Contrast

FF282D
798265
9C7262
7D7C7C
DD0048
—
1.1
Fail
1.1
Fail
1.1
Fail
1.3
Fail
1.1
Fail
—
1.0
Fail
1.0
Fail
1.2
Fail
1.1
Fail
1.0
Fail
—
1.0
Fail
1.2
Fail
1.1
Fail
1.0
Fail
1.0
Fail
—
1.2
Fail
1.3
Fail
1.2
Fail
1.2
Fail
1.2
Fail
—
White BG
3.8AA Large
4.0AA Large
4.2AA Large
4.2AA Large
5.0AA
Black BG
5.6AA
5.2AA
5.0AA
5.0AA
4.2AA Large

Color Blindness Simulation Color Blindness Simulation

Protanopia

A2A02C
7D7D6C
8A8966
7D7D7C
7D7B37

Deuteranopia

AEBF2C
7C7C6E
8C8F67
7D7D7C
8A9B32

Tritanopia

F42B2B
797273
9A696A
7D7C7C
D22926

Achromatopsia

696969
7C7C7C
7D7D7D
7C7C7C
4A4A4A

Shades & Tints Shades & Tints

#FF282D

Dark
Light

#798265

Dark
Light

#9C7262

Dark
Light

Code Snippets Code Snippets

CSS Custom Properties

:root {
  --color-1: #ff282d;
  --color-2: #798265;
  --color-3: #9c7262;
  --color-4: #7d7c7c;
  --color-5: #dd0048;
}

SCSS

$color-1: #ff282d;
$color-2: #798265;
$color-3: #9c7262;
$color-4: #7d7c7c;
$color-5: #dd0048;

TAILWIND

colors: {
  'brand-1': '#ff282d',
  'brand-2': '#798265',
  'brand-3': '#9c7262',
  'brand-4': '#7d7c7c',
  'brand-5': '#dd0048',
}

RGB Array

[255, 40, 45], [121, 130, 101], [156, 114, 98], [125, 124, 124], [221, 0, 72]

FAQ FAQ

What scenarios is this 5-color palette suitable for?

This spring-style palette of #FF282D, #798265, #9C7262, #7D7C7C, #DD0048 is ideal for: corporate websites, product showcases, portfolios. 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: #ff282d; --color-2: #798265; --color-3: #9c7262; --color-4: #7d7c7c; --color-5: #dd0048. 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. 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 spring-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