CSS named colour
Crimson
#dc143c
A CSS named colour: crimson is valid anywhere a colour is expected.
- RGB
- rgb(220 20 60)
- HSL
- 348°, 83%, 47%
- OKLCh
- 57.1% 0.222 20.1
Crimson in every format
Web & CSSThe everyday formats for stylesheets and design tools.
| Hex | #dc143c | |
|---|---|---|
| RGB | rgb(220 20 60) | |
| RGB legacy | rgb(220, 20, 60) | |
| RGB percent | rgb(86.27% 7.84% 23.53%) | |
| HSL | hsl(348 83.3% 47.1%) | |
| HSL legacy | hsl(348, 83.3%, 47.1%) | |
| HSV / HSB | hsv(348, 90.9%, 86.3%) | |
| HWB | hwb(348 7.8% 13.7%) | |
| Nearest name | crimson | |
| CMYK | cmyk(0%, 90.9%, 72.7%, 13.7%)Naive conversion. Real print work needs an ICC profile. |
Perceptual & wide gamutModern CSS colour spaces for uniform scales and P3 displays.
| OKLCh | oklch(57.119% 0.22194 20.087)Modern CSS colour space for even palettes — better than HSL when building scales. | |
|---|---|---|
| OKLab | oklab(57.119% 0.20844 0.07623) | |
| CIE LCh | lch(47.879% 79.619 26.464) | |
| CIE Lab | lab(47.879% 71.276 35.482) | |
| Display P3 | color(display-p3 0.7917 0.1915 0.2574) | |
| Rec. 2020 | color(rec2020 0.6707 0.2021 0.1934) | |
| srgb-linear | color(srgb-linear 0.7157 0.007 0.0452)Light-linear sRGB — the same numbers a shader wants for maths. | |
| CIE XYZ (D65) | color(xyz-d65 0.3058 0.1604 0.0576) |
ShadersGLSL, HLSL and WGSL vectors in both encoded and linear form.
| GLSL vec3 — sRGB | vec3(0.863, 0.078, 0.235)Encoded values. Use when writing straight to the framebuffer. | |
|---|---|---|
| GLSL vec3 — linear | vec3(0.716, 0.007, 0.045)Light-linear values. Use for lighting, blending and mixing. | |
| GLSL vec4 — sRGB | vec4(0.863, 0.078, 0.235, 1.0) | |
| GLSL vec4 — linear | vec4(0.716, 0.007, 0.045, 1.0) | |
| GLSL ivec3 | ivec3(220, 20, 60) | |
| HLSL float3 — sRGB | float3(0.863, 0.078, 0.235) | |
| HLSL float3 — linear | float3(0.716, 0.007, 0.045) | |
| HLSL float4 — sRGB | float4(0.863, 0.078, 0.235, 1.0) | |
| HLSL half4 — sRGB | half4(0.863, 0.078, 0.235, 1.0) | |
| WGSL vec3f — sRGB | vec3f(0.863, 0.078, 0.235) | |
| WGSL vec4f — sRGB | vec4f(0.863, 0.078, 0.235, 1.0) | |
| WGSL vec3<f32> — linear | vec3<f32>(0.716, 0.007, 0.045) |
Engines & appsConstructors for Unity, Unreal, Godot, Flutter, SwiftUI and Android.
| Unity Color | new Color(0.863f, 0.078f, 0.235f, 1.0f)Color for everyday scripting (0–1). Color32 when you need whole numbers from 0 to 255. | |
|---|---|---|
| Unity Color32 | new Color32(220, 20, 60, 255) | |
| Unreal FLinearColor | FLinearColor(0.7157f, 0.007f, 0.0452f, 1.0f)FLinearColor for materials and lighting. FColor when you need whole numbers from 0 to 255. | |
| Unreal FColor | FColor(220, 20, 60, 255)Whole numbers from 0 to 255 — use when an API asks for FColor, not FLinearColor. | |
| Godot Color | Color(0.863, 0.078, 0.235, 1) | |
| Flutter Color | Color(0xFFDC143C)Packed ARGB, so alpha comes first. | |
| Android Color | Color.rgb(220, 20, 60) | |
| SwiftUI Color | Color(red: 0.863, green: 0.078, blue: 0.235) | |
| UIKit UIColor | UIColor(red: 0.863, green: 0.078, blue: 0.235, alpha: 1) |
Raw valuesPacked integers and plain arrays.
| 0x hex | 0xDC143C | |
|---|---|---|
| 0x hex (ARGB) | 0xFFDC143C | |
| Array 0–1 | [0.863, 0.078, 0.235] | |
| Array 0–255 | [220, 20, 60] | |
| Decimal integer | 14423100 |
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 |
|---|---|---|---|---|
| Crimson on white | 4.99:1 | AA | Lc 72 | Headings and large text |
| Crimson on black | 4.21:1 | AA Large | Lc 29 | Not usable for text |
Crimson text on a white background
Crimson text on a black background
White text on Crimson
Black text on Crimson
Tonal scale
Hue held fixed while lightness walks OKLCh, ready to use as a design system ramp.
- 50#ffefee
- 100#ffe1e0
- 200#ffc9c7
- 300#ffa5a5
- 400#ff6f77
- 500#f4384f
- 600#d20f38
- 700#b10025
- 800#90001a
- 900#740011
- 950#480005
Tints and shades
Mixed perceptually toward white and black, so the steps feel evenly spaced.
- Tint 1#e7525c
- Tint 2#f1797c
- Tint 3#f89c9b
- Tint 4#fdbdbc
- Tint 5#ffdedd
- Shade 1#ac0d2d
- Shade 2#7f071f
- Shade 3#540311
- Shade 4#2d0106
- Shade 5#0b0001
Colours that work with Crimson
Complementary, triadic and analogous partners, rotated in OKLCh so they keep the same apparent brightness.
- #008b93
- #009300
- #126df7
- #ce1f89
- #c44e00
Closest CSS names
crimsonexact matchredΔEok 0.077firebrickΔEok 0.089indianredΔEok 0.090orangeredΔEok 0.108brownΔEok 0.111