HIF applied colour assurance
Build colour without the guesswork
Start with one seed. Colour Lab derives restrained semantic systems, rejects candidates that fail hard constraints and exports implementation-ready light and dark tokens.
A brand seed guides hue. It does not automatically become text, status or a large surface.
Preview scheme
Expression profile
Selected colour system
HIF Colour LabQuiet
HIF applied colour assurance
A calm interface with one clear decision
Surfaces carry structure. Colour carries a named role instead of competing with the content.
Changes saved
One decision needs review
Primitive scales
OkLCH → sRGB
Neutral
50
#f8f8f8100
#eeeeef200
#d7d7d9300
#b6b7b9400
#97989a500
#797a7d600
#5c5e60700
#414244800
#28292a900
#111213950
#020203Accent
50
#f4f9ff100
#e6effd200
#c6d9f4300
#9db9e3400
#779acc500
#567cb1600
#3a5e92700
#214271800
#0e284d900
#031129950
#000209Supporting
50
#f6f9fd100
#eceff3200
#d2d8e1300
#afb8c6400
#8e99a9500
#6f7b8c600
#535e6f700
#394352800
#212935900
#0d1219950
#020204Information
Success
Warning
Danger
Semantic tokens
| Role | Light | Dark |
|---|---|---|
| canvas | #f8f8f8 | #020203 |
| surface | #eeeeef | #111213 |
| text.primary | #111213 | #eeeeef |
| text.secondary | #414244 | #97989a |
| border | #797a7d | #5c5e60 |
| accent | #3a5e92 | #779acc |
| on-accent | #ffffff | #090b10 |
| support | #535e6f | #8e99a9 |
| on-support | #ffffff | #090b10 |
| focus | #567cb1 | #779acc |
| status.success | #2f4a30 | #a7bfa7 |
| status.warning | #514018 | #c5b696 |
| status.danger | #62322f | #d8aba6 |
Required rendered pairs
- Aalight-text-primary17.66:1 / 7:1PASS
- Aalight-text-secondary9.47:1 / 4.5:1PASS
- Aalight-control-boundary4.04:1 / 3:1PASS
- Aalight-accent-boundary6.19:1 / 3:1PASS
- Aalight-accent-content6.57:1 / 4.5:1PASS
- Aalight-support-boundary6.18:1 / 3:1PASS
- Aalight-support-content6.57:1 / 4.5:1PASS
- Aalight-focus4.02:1 / 3:1PASS
- Aalight-info8.58:1 / 4.5:1PASS
- Aalight-success8.50:1 / 4.5:1PASS
- Aalight-warning8.66:1 / 4.5:1PASS
- Aalight-danger8.99:1 / 4.5:1PASS
- Aadark-text-primary17.89:1 / 7:1PASS
- Aadark-text-secondary7.18:1 / 4.5:1PASS
- Aadark-control-boundary3.18:1 / 3:1PASS
- Aadark-accent-boundary7.19:1 / 3:1PASS
- Aadark-accent-content6.82:1 / 4.5:1PASS
- Aadark-support-boundary7.19:1 / 3:1PASS
- Aadark-support-content6.82:1 / 4.5:1PASS
- Aadark-focus7.19:1 / 3:1PASS
- Aadark-info9.43:1 / 4.5:1PASS
- Aadark-success9.51:1 / 4.5:1PASS
- Aadark-warning9.42:1 / 4.5:1PASS
- Aadark-danger9.30:1 / 4.5:1PASS
The high-chroma threshold and near-duplicate distance are HIF engineering diagnostics, not WCAG conformance thresholds. Component roles, area, states, forced colours and human interpretation still require review. Read the colour constitution