<h1>Color Conversions Using Relative Color Syntax</h1>
<div class="container">
<div class="box box01">Base Color RGB</div>
<div class="box box02">OKLCH</div>
<div class="box box03">HSL</div>
<div class="box box04">LAB</div>
</div>
* {
box-sizing: border-box;
}
:root {
/* font settings */
font-family: system-ui, sans-serif;
font-size: 1.2rem;
/* Base Color Settings */
--base-color: #663399;
--oklch-color: oklch(from var(--base-color) l c h);
--hsl-color: hsl(from var(--base-color) h s l);
--lab-color: lab(from var(--base-color) l a b);
}
body {
display: flex;
flex-direction: column;
place-items: center;
}
.container {
display: flex;
flex-direction: row;
gap: 1rem;
}
.box {
inline-size: 200px;
block-size: 200px;
border: 1px solid black;
/* optional */
display: flex;
place-content: center;
align-items: center;
}
.box01 {
background: var(--base-color);
color: color-contrast(var(--base-color) vs white, black);
}
.box02 {
background: var(--oklch-color);
color: color-contrast(var(--base-color) vs white, black);
}
.box03 {
background: var(--hsl-color);
color: color-contrast(var(--hsl-color) vs white, black);
}
.box04 {
background: var(--lab-color);
color: color-contrast(var(--lab-color) vs white, black);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.