Skip to content

Instantly share code, notes, and snippets.

Avatar

Lea Verou LeaVerou

View GitHub Profile
View colorNotebook.md

Tab's example

let middleRed = new Color("rgb(100 0 0)");
let middleGreen = new Color("rgb(0 100 0)");
let mixed = middleRed.mix(middleGreen, -.2, {space: "srgb"});

middleRed.hue;
mixed.hue;
@LeaVerou
LeaVerou / dabblet.css
Created Mar 27, 2021
LCH vs HSL colors for the same lightness
View dabblet.css
/**
* LCH vs HSL colors for the same lightness
*/
div {
width: 100%;
height: 6em;
background: linear-gradient(to right, var(--stops));
--stops: gray, gray;
--l: 50%;
View dabblet.css
/**
* Extrapolation
*/
@keyframes funky {
to {
background: gray;
}
}
View colorNotebook.md

Lightness/darkness adjustments

How to lighten/darken

let color = new Color("hsl(20, 100%, 30%)");

// HSL lightness adjustment
let lighter = color.clone();
View dabblet.css
/**
* HSL problems
*/
body, div {
display: grid;
grid-template-columns: 1fr 1fr;
}
div {
@LeaVerou
LeaVerou / dabblet.css
Created Feb 10, 2021
Providing color suggestions
View dabblet.css
/**
* Providing color suggestions
*/
@LeaVerou
LeaVerou / dabblet.css
Created Jan 28, 2021
Selector lists in :not()
View dabblet.css
/**
* Selector lists in :not()
*/
body {
background: red;
}
body:not(#a, .b, c) {
background: green;
@LeaVerou
LeaVerou / dabblet.css
Created Jan 28, 2021
Complex selectors inside :not()
View dabblet.css
/**
* Complex selectors inside :not()
*/
body {
background: red;
}
body:not(#foo .bar) {
background: green;
View dabblet.css
/**
* orientation MQ
*/
@media (orientation: portrait) {
body {
background: green;
}
}
@LeaVerou
LeaVerou / dabblet.css
Last active Jan 18, 2021
var() and fallback
View dabblet.css
/**
* var() and fallback
*/
--initial: initial;
background: var(--initial, green); /* fallback applied */