Colour reference
Amber 500
#f59e0b
- RGB
- rgb(245 158 11)
- HSL
- 38°, 92%, 50%
- OKLCh
- 76.9% 0.165 70.1
Amber 500 in every format
Web & CSSThe everyday formats for stylesheets and design tools.
| Hex | #f59e0b | |
|---|---|---|
| RGB | rgb(245 158 11) | |
| RGB legacy | rgb(245, 158, 11) | |
| RGB percent | rgb(96.08% 61.96% 4.31%) | |
| HSL | hsl(37.7 92.1% 50.2%) | |
| HSL legacy | hsl(37.7, 92.1%, 50.2%) | |
| HSV / HSB | hsv(37.7, 95.5%, 96.1%) | |
| HWB | hwb(37.7 4.3% 3.9%) | |
| Nearest name | orange (approx.) | |
| CMYK | cmyk(0%, 35.5%, 95.5%, 3.9%)Naive conversion. Real print work needs an ICC profile. |
Perceptual & wide gamutModern CSS colour spaces for uniform scales and P3 displays.
| OKLCh | oklch(76.859% 0.16466 70.08)Modern CSS colour space for even palettes — better than HSL when building scales. | |
|---|---|---|
| OKLab | oklab(76.859% 0.0561 0.15481) | |
| CIE LCh | lch(72.791% 80.098 70.351) | |
| CIE Lab | lab(72.791% 26.933 75.434) | |
| Display P3 | color(display-p3 0.9122 0.6349 0.2305) | |
| Rec. 2020 | color(rec2020 0.8283 0.6099 0.1812) | |
| srgb-linear | color(srgb-linear 0.9131 0.3419 0.0033)Light-linear sRGB — the same numbers a shader wants for maths. | |
| CIE XYZ (D65) | color(xyz-d65 0.4994 0.4389 0.0616) |
ShadersGLSL, HLSL and WGSL vectors in both encoded and linear form.
| GLSL vec3 — sRGB | vec3(0.961, 0.62, 0.043)Encoded values. Use when writing straight to the framebuffer. | |
|---|---|---|
| GLSL vec3 — linear | vec3(0.913, 0.342, 0.003)Light-linear values. Use for lighting, blending and mixing. | |
| GLSL vec4 — sRGB | vec4(0.961, 0.62, 0.043, 1.0) | |
| GLSL vec4 — linear | vec4(0.913, 0.342, 0.003, 1.0) | |
| GLSL ivec3 | ivec3(245, 158, 11) | |
| HLSL float3 — sRGB | float3(0.961, 0.62, 0.043) | |
| HLSL float3 — linear | float3(0.913, 0.342, 0.003) | |
| HLSL float4 — sRGB | float4(0.961, 0.62, 0.043, 1.0) | |
| HLSL half4 — sRGB | half4(0.961, 0.62, 0.043, 1.0) | |
| WGSL vec3f — sRGB | vec3f(0.961, 0.62, 0.043) | |
| WGSL vec4f — sRGB | vec4f(0.961, 0.62, 0.043, 1.0) | |
| WGSL vec3<f32> — linear | vec3<f32>(0.913, 0.342, 0.003) |
Engines & appsConstructors for Unity, Unreal, Godot, Flutter, SwiftUI and Android.
| Unity Color | new Color(0.961f, 0.62f, 0.043f, 1.0f)Color for everyday scripting (0–1). Color32 when you need whole numbers from 0 to 255. | |
|---|---|---|
| Unity Color32 | new Color32(245, 158, 11, 255) | |
| Unreal FLinearColor | FLinearColor(0.9131f, 0.3419f, 0.0033f, 1.0f)FLinearColor for materials and lighting. FColor when you need whole numbers from 0 to 255. | |
| Unreal FColor | FColor(245, 158, 11, 255)Whole numbers from 0 to 255 — use when an API asks for FColor, not FLinearColor. | |
| Godot Color | Color(0.961, 0.62, 0.043, 1) | |
| Flutter Color | Color(0xFFF59E0B)Packed ARGB, so alpha comes first. | |
| Android Color | Color.rgb(245, 158, 11) | |
| SwiftUI Color | Color(red: 0.961, green: 0.62, blue: 0.043) | |
| UIKit UIColor | UIColor(red: 0.961, green: 0.62, blue: 0.043, alpha: 1) |
Raw valuesPacked integers and plain arrays.
| 0x hex | 0xF59E0B | |
|---|---|---|
| 0x hex (ARGB) | 0xFFF59E0B | |
| Array 0–1 | [0.961, 0.62, 0.043] | |
| Array 0–255 | [245, 158, 11] | |
| Decimal integer | 16096779 |
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 |
|---|---|---|---|---|
| Amber 500 on white | 2.15:1 | Fail | Lc 42 | Non-text elements only |
| Amber 500 on black | 9.78:1 | AAA | Lc 60 | Headings and large text |
Amber 500 text on a white background
Amber 500 text on a black background
White text on Amber 500
Black text on Amber 500
Tonal scale
Hue held fixed while lightness walks OKLCh, ready to use as a design system ramp.
- 50#fff3d5
- 100#ffe6ba
- 200#ffd088
- 300#ffb34b
- 400#e79401
- 500#c67600
- 600#a35f00
- 700#854b00
- 800#6b3a00
- 900#552d00
- 950#341700
Tints and shades
Mixed perceptually toward white and black, so the steps feel evenly spaced.
- Tint 1#f8af52
- Tint 2#fbc07a
- Tint 3#fcd09d
- Tint 4#fee0bf
- Tint 5#fff0df
- Shade 1#c07b06
- Shade 2#8e5a03
- Shade 3#5f3a01
- Shade 4#341e00
- Shade 5#0e0500
Colours that work with Amber 500
Complementary, triadic and analogous partners, rotated in OKLCh so they keep the same apparent brightness.
- #65b9ff
- #00d1c9
- #d493ff
- #ff8b5d
- #cdb500
Closest CSS names
orangeΔEok 0.025darkorangeΔEok 0.042goldenrodΔEok 0.045sandybrownΔEok 0.048lightsalmonΔEok 0.083coralΔEok 0.092