Crafting UI
Color Manipulation
?
Color tokens
#495dc5
100
200
300
400
500
600
700
800
Color tokens
100
200
300
400
500
600
700
800
Color tokens
200
500
800
Color tokens
Color spaces
P3 color gamut
.valid-css-color-function-colors {
--srgb: color(srgb 1 1 1);
--srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
--a98-rgb: color(a98-rgb 1 1 1 / 25%);
--prophoto: color(prophoto-rgb 0% 0% 0%);
--xyz: color(xyz 1 1 1);
}Color spaces
.most-hyped {
--display-p3: color(display-p3 1 1 1);
--rec2020: color(rec2020 0 0 0);
}Color spaces
.element {
background: oklch(80% 50% 220);
}lightness
chroma
hue
Color models
oklch()
Næsten ligesom hsl()
Modeller
oklch()
oklch()
Farvespektrum
In OKLCH all backgrounds with L≥87% have good contrast with black text.
Farvesystem
Gradients
Gradients
Gradients
Gradients
Color Spaces
Color Manipulation
color-mix() og RCS
color-mix()
Blanding af farver
color-mix()
color-mix()
color-mix()
color-mix()
Color Mix
Øvelse
Color Mix
Relative Color Syntax
Relative Color Syntax
Relative Color Syntax
Relative Color Syntax
Relative Color Syntax
Relative Color Syntax
Relative Color Syntax
hover- og active-state
Relative Color Syntax
Relative Color Syntax
button {
background: #FFCC4A;
&:hover {
background: oklch( from #FFCC4A calc(l - .05) c h );
}
&:active {
background: oklch( from #FFCC4A calc(l - .1) c h );
}
}Relative Color Syntax
- surface til 90% L-værdi
- border til 80% L-værdi
- heading til 40% af farvens L-værdi
- Øg L-værdien for text med 20 procentpoint fra heading
Relative Color Syntax
Brug oklch(from ... l c h)
Ret til i denne kanal
Crafting UI: Color Manipulation
By Dannie Vinther
Crafting UI: Color Manipulation
Crafting UI w/ CSS
