Colour reference
Poppy Red
#e63946
- RGB
- rgb(230 57 70)
- HSL
- 355°, 78%, 56%
- OKLCh
- 61.2% 0.208 22.2
Poppy Red in every format
Web & CSSThe everyday formats for stylesheets and design tools.
| Hex | #e63946 | |
|---|---|---|
| RGB | rgb(230 57 70) | |
| RGB legacy | rgb(230, 57, 70) | |
| RGB percent | rgb(90.2% 22.35% 27.45%) | |
| HSL | hsl(355.5 77.6% 56.3%) | |
| HSL legacy | hsl(355.5, 77.6%, 56.3%) | |
| HSV / HSB | hsv(355.5, 75.2%, 90.2%) | |
| HWB | hwb(355.5 22.4% 9.8%) | |
| Nearest name | crimson (approx.) | |
| CMYK | cmyk(0%, 75.2%, 69.6%, 9.8%)Naive conversion. Real print work needs an ICC profile. |
Perceptual & wide gamutModern CSS colour spaces for uniform scales and P3 displays.
| OKLCh | oklch(61.222% 0.20817 22.241)Modern CSS colour space for even palettes — better than HSL when building scales. | |
|---|---|---|
| OKLab | oklab(61.222% 0.19268 0.07879) | |
| CIE LCh | lch(52.851% 75.465 28.341) | |
| CIE Lab | lab(52.851% 66.419 35.825) | |
| Display P3 | color(display-p3 0.8312 0.2846 0.298) | |
| Rec. 2020 | color(rec2020 0.7145 0.2782 0.2359) | |
| srgb-linear | color(srgb-linear 0.7913 0.0409 0.0612)Light-linear sRGB — the same numbers a shader wants for maths. | |
| CIE XYZ (D65) | color(xyz-d65 0.352 0.2019 0.0784) |
ShadersGLSL, HLSL and WGSL vectors in both encoded and linear form.
| GLSL vec3 — sRGB | vec3(0.902, 0.224, 0.275)Encoded values. Use when writing straight to the framebuffer. | |
|---|---|---|
| GLSL vec3 — linear | vec3(0.791, 0.041, 0.061)Light-linear values. Use for lighting, blending and mixing. | |
| GLSL vec4 — sRGB | vec4(0.902, 0.224, 0.275, 1.0) | |
| GLSL vec4 — linear | vec4(0.791, 0.041, 0.061, 1.0) | |
| GLSL ivec3 | ivec3(230, 57, 70) | |
| HLSL float3 — sRGB | float3(0.902, 0.224, 0.275) | |
| HLSL float3 — linear | float3(0.791, 0.041, 0.061) | |
| HLSL float4 — sRGB | float4(0.902, 0.224, 0.275, 1.0) | |
| HLSL half4 — sRGB | half4(0.902, 0.224, 0.275, 1.0) | |
| WGSL vec3f — sRGB | vec3f(0.902, 0.224, 0.275) | |
| WGSL vec4f — sRGB | vec4f(0.902, 0.224, 0.275, 1.0) | |
| WGSL vec3<f32> — linear | vec3<f32>(0.791, 0.041, 0.061) |
Engines & appsConstructors for Unity, Unreal, Godot, Flutter, SwiftUI and Android.
| Unity Color | new Color(0.902f, 0.224f, 0.275f, 1.0f)Color for everyday scripting (0–1). Color32 when you need whole numbers from 0 to 255. | |
|---|---|---|
| Unity Color32 | new Color32(230, 57, 70, 255) | |
| Unreal FLinearColor | FLinearColor(0.7913f, 0.0409f, 0.0612f, 1.0f)FLinearColor for materials and lighting. FColor when you need whole numbers from 0 to 255. | |
| Unreal FColor | FColor(230, 57, 70, 255)Whole numbers from 0 to 255 — use when an API asks for FColor, not FLinearColor. | |
| Godot Color | Color(0.902, 0.224, 0.275, 1) | |
| Flutter Color | Color(0xFFE63946)Packed ARGB, so alpha comes first. | |
| Android Color | Color.rgb(230, 57, 70) | |
| SwiftUI Color | Color(red: 0.902, green: 0.224, blue: 0.275) | |
| UIKit UIColor | UIColor(red: 0.902, green: 0.224, blue: 0.275, alpha: 1) |
Raw valuesPacked integers and plain arrays.
| 0x hex | 0xE63946 | |
|---|---|---|
| 0x hex (ARGB) | 0xFFE63946 | |
| Array 0–1 | [0.902, 0.224, 0.275] | |
| Array 0–255 | [230, 57, 70] | |
| Decimal integer | 15087942 |
Contrast and accessibility
WCAG 2 ratios are what audits and legislation reference. APCA is shown alongside because WCAG 2 is known to misjudge mid-tone backgrounds, and it is the basis of the WCAG 3 draft.
| Pairing | WCAG 2 ratio | Level | APCA | Suitable for |
|---|---|---|---|---|
| Poppy Red on white | 4.17:1 | AA Large | Lc 67 | Headings and large text |
| Poppy Red on black | 5.04:1 | AA | Lc 34 | Non-text elements only |
Poppy Red text on a white background
Poppy Red text on a black background
White text on Poppy Red
Black text on Poppy Red
Tonal scale
Hue held fixed while lightness walks OKLCh, ready to use as a design system ramp.
- 50#ffefed
- 100#ffe2df
- 200#ffc9c5
- 300#ffa5a2
- 400#ff7071
- 500#ef434d
- 600#cd2336
- 700#ad0023
- 800#900013
- 900#74000b
- 950#480003
Tints and shades
Mixed perceptually toward white and black, so the steps feel evenly spaced.
- Tint 1#ef6365
- Tint 2#f68583
- Tint 3#fca5a1
- Tint 4#ffc3c0
- Tint 5#ffe1df
- Shade 1#b42b35
- Shade 2#851d25
- Shade 3#591015
- Shade 4#300507
- Shade 5#0c0101
Colours that work with Poppy Red
Complementary, triadic and analogous partners, rotated in OKLCh so they keep the same apparent brightness.
- #0099a4
- #06a000
- #397afe
- #da3b90
- #d35b00
Closest CSS names
crimsonΔEok 0.044redΔEok 0.059indianredΔEok 0.064orangeredΔEok 0.073tomatoΔEok 0.092chocolateΔEok 0.104