-
spaces = [
{
name: 'hex',
examples: [
'#4095bf',
'#49b',
'#4095bfff',
'#49bf',
'#4095bf80',
'#49b8',
'#ffffff',
'#fff',
'#ffffffff',
'#ffff',
'#000000',
'#000',
'#000000ff',
'#000f',
]
},
{
name: 'rgb',
examples: [
'rgb(64, 149, 191)',
'rgb(64 149 191)',
'rgb(25% 58% 75%)',
'rgba(64, 149, 191, 50%)',
'rgba(64, 149, 191, .5)',
'rgb(64 149 191 / 50%)',
'rgb(64 149 191 / .5)',
'rgb(25% 58% 75% / 50%)',
'rgb(25% 58% 75% / .5)',
'rgb(255, 255, 255)',
'rgb(255 255 255)',
'rgb(100% 100% 100%)',
'rgb(0, 0, 0)',
'rgb(0 0 0)',
'rgb(0% 0% 0%)',
'rgb(none none none)',
]
},
{
name: 'srgb',
examples: [
'color(srgb 34% 58% 73%)',
'color(srgb .34 .58 .73)',
'color(srgb 34% 58% 73% / 50%)',
'color(srgb .34 .58 .73 / .5)',
'color(srgb 100% 100% 100%)',
'color(srgb 1 1 1)',
'color(srgb 0% 0% 0%)',
'color(srgb 0 0 0)',
'color(srgb none none none)',
'color(srgb 0)',
'color(srgb)',
]
},
{
name: 'srgb-linear',
examples: [
'color(srgb-linear 5% 30% 52%)',
'color(srgb-linear .05 .3 .52)',
'color(srgb-linear 5% 30% 52% / 50%)',
'color(srgb-linear .05 .3 .52 / .5)',
'color(srgb-linear 100% 100% 100%)',
'color(srgb-linear 1 1 1)',
'color(srgb-linear 0% 0% 0%)',
'color(srgb-linear 0 0 0)',
'color(srgb-linear none none none)',
'color(srgb-linear 0)',
'color(srgb-linear)',
]
},
{
name: 'hsl',
examples: [
'hsl(200deg, 50%, 50%)',
'hsl(200 50% 50%)',
'hsla(200deg, 50%, 50%, 50%)',
'hsla(200deg, 50%, 50%, .5)',
'hsl(200 50% 50% / 50%)',
'hsl(200 50% 50% / .5)',
'hsl(0 0% 100%)',
'hsl(none none 100%)',
'hsl(0 0% 0%)',
'hsl(none none 0%)',
]
},
{
name: 'hwb',
examples: [
'hwb(200deg 25% 25%)',
'hwb(200 25% 25%)',
'hwb(200 25% 25% / 50%)',
'hwb(200 25% 25% / .5)',
'hwb(0 100% 0%)',
'hwb(none 100% none)',
'hwb(0 0% 100%)',
'hwb(none none 100%)',
]
},
{
name: 'lch',
examples: [
'lch(58% 32 241deg)',
'lch(58 32 241deg)',
'lch(58 32 241)',
'lch(58 20% 241)',
'lch(58% 32 241 / 50%)',
'lch(58% 32 241 / .5)',
'lch(100% 0 0)',
'lch(100 0 0)',
'lch(100 none none)',
'lch(0% 0 0)',
'lch(0 0 0)',
'lch(none none none)',
]
},
{
name: 'oklch',
examples: [
'oklch(64% .1 233deg)',
'oklch(.64 .1 233deg)',
'oklch(.64 .1 233)',
'oklch(.64 20% 233)',
'oklch(64% .1 233 / 50%)',
'oklch(64% .1 233 / .5)',
'oklch(100% 0 0)',
'oklch(1 0 0)',
'oklch(1 none none)',
'oklch(0% 0 0)',
'oklch(0 0 0)',
'oklch(none none none)',
]
},
{
name: 'lab',
examples: [
'lab(58% -16 -30)',
'lab(58 -16 -30)',
'lab(58% -16 -30 / 50%)',
'lab(58% -16 -30 / .5)',
'lab(100% 0 0)',
'lab(100 0 0)',
'lab(100 none none)',
'lab(0% 0 0)',
'lab(0 0 0)',
'lab(none none none)',
]
},
{
name: 'oklab',
examples: [
'oklab(64% -.1 -.1)',
'oklab(.64 -.1 -.1)',
'oklab(64% -.1 -.1 / 50%)',
'oklab(64% -.1 -.1 / .5)',
'oklab(100% 0 0)',
'oklab(1 0 0)',
'oklab(1 none none)',
'oklab(0% 0 0)',
'oklab(0 0 0)',
'oklab(none none none)',
]
},
{
name: 'display-p3',
examples: [
'color(display-p3 34% 58% 73%)',
'color(display-p3 .34 .58 .73)',
'color(display-p3 34% 58% 73% / 50%)',
'color(display-p3 .34 .58 .73 / .5)',
'color(display-p3 100% 100% 100%)',
'color(display-p3 1 1 1)',
'color(display-p3 0% 0% 0%)',
'color(display-p3 0 0 0)',
'color(display-p3 none none none)',
'color(display-p3 0)',
'color(display-p3)',
]
},
{
name: 'rec2020',
examples: [
'color(rec2020 34% 58% 73%)',
'color(rec2020 .34 .58 .73)',
'color(rec2020 34% 58% 73% / 50%)',
'color(rec2020 .34 .58 .73 / .5)',
'color(rec2020 100% 100% 100%)',
'color(rec2020 1 1 1)',
'color(rec2020 0% 0% 0%)',
'color(rec2020 0 0 0)',
'color(rec2020 none none none)',
'color(rec2020 0)',
'color(rec2020)',
]
},
{
name: 'a98-rgb',
examples: [
'color(a98-rgb 34% 58% 73%)',
'color(a98-rgb .34 .58 .73)',
'color(a98-rgb 34% 58% 73% / 50%)',
'color(a98-rgb .34 .58 .73 / .5)',
'color(a98-rgb 100% 100% 100%)',
'color(a98-rgb 1 1 1)',
'color(a98-rgb 0% 0% 0%)',
'color(a98-rgb 0 0 0)',
'color(a98-rgb none none none)',
'color(a98-rgb 0)',
'color(a98-rgb)',
]
},
{
name: 'prophoto-rgb',
examples: [
'color(prophoto-rgb 34% 58% 73%)',
'color(prophoto-rgb .34 .58 .73)',
'color(prophoto-rgb 34% 58% 73% / 50%)',
'color(prophoto-rgb .34 .58 .73 / .5)',
'color(prophoto-rgb 100% 100% 100%)',
'color(prophoto-rgb 1 1 1)',
'color(prophoto-rgb 0% 0% 0%)',
'color(prophoto-rgb 0 0 0)',
'color(prophoto-rgb none none none)',
'color(prophoto-rgb 0)',
'color(prophoto-rgb)',
]
},
{
name: 'xyz',
examples: [
'color(xyz 22% 26% 53%)',
'color(xyz .22 .26 .53)',
'color(xyz .22 .26 .53 / 50%)',
'color(xyz .22 .26 .53 / .5)',
'color(xyz 100% 100% 100%)',
'color(xyz 1 1 1)',
'color(xyz 0% 0% 0%)',
'color(xyz 0 0 0)',
'color(xyz none none none)',
'color(xyz)',
]
},
{
name: 'xyz-d50',
examples: [
'color(xyz-d50 22% 26% 53%)',
'color(xyz-d50 .22 .26 .53)',
'color(xyz-d50 .22 .26 .53 / 50%)',
'color(xyz-d50 .22 .26 .53 / .5)',
'color(xyz-d50 100% 100% 100%)',
'color(xyz-d50 1 1 1)',
'color(xyz-d50 0% 0% 0%)',
'color(xyz-d50 0 0 0)',
'color(xyz-d50 none none none)',
'color(xyz-d50)',
]
},
{
name: 'xyz-d65',
examples: [
'color(xyz-d65 22% 26% 53%)',
'color(xyz-d65 .22 .26 .53)',
'color(xyz-d65 .22 .26 .53 / 50%)',
'color(xyz-d65 .22 .26 .53 / .5)',
'color(xyz-d65 100% 100% 100%)',
'color(xyz-d65 1 1 1)',
'color(xyz-d65 0% 0% 0%)',
'color(xyz-d65 0 0 0)',
'color(xyz-d65 none none none)',
'color(xyz-d65)',
]
},
]
each space in spaces
dl
dt= space.name
each color in space.examples
dd
.swatch(style="--_color: " + color)
code= color@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);
@layer demo.support;
@layer demo {
.swatch {
background: var(--_color, red);
inline-size: var(--size-3);
aspect-ratio: var(--ratio-square);
box-shadow: var(--inner-shadow-0);
border-radius: var(--radius-1);
}
}
@layer demo.support {
body {
--_grid-wrap: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
display: grid;
grid-template-columns: var(--_grid-wrap);
place-content: center;
align-items: start;
padding: var(--size-10);
gap: var(--size-10);
}
dl {
display: grid;
gap: var(--size-2);
}
dt {
text-transform: uppercase;
font-size: var(--font-size-5);
}
dd {
display: flex;
align-items: center;
gap: var(--size-2);
}
@media (prefers-color-scheme: light) {
body {
background: var(--gray-4);
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.