made by alan w smith ~ source ~ other projects ~ socials
Play around with the Background and Colors controls in the sidebar. Use them to pick colors for both Light and Dark mode.
This section is placeholder text to give you something to see how your colors look on a page. It contains a link and spans for the warning and accent colors.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula, mauris sed dictum suscipit, this is a link example nisl leo congue massa, at placerat diam elit non metus. Aenean luctus turpis at ligula porta, ut efficitur
Ligula molestie. This span uses accent. Quisque et nulla id magna
Vulputate rhoncus convallis ut elit. This is a span with warning. Sapien in eleifend lacinia, sem metus facilisis nibh, ut vulputate turpis justo quis lorem. Maecenas et lacinia lorem. Donec fermentum dolor id dolor tempus, at aliquet lorem fermentum. Suspendisse non purus ac ligula accumsan varius.
Ut et venenatis velit, volutpat mollis metus. Integer ultrices in justo dapibus rhoncus. Nam lobortis vitae lacus sed lobortis. Pellentesque porta et enim vel dapibus. Vivamus pellentesque metus ut iaculis pellentesque.
Each color has three versions. The full color and two automatically created faded styles. Here's live previews of their text, borders, and backgrounds:
Browsers can usually determine if your visitors prefer light or dark mode. That's not always possible. Which mode would you like to present if a preference can't be determined?
Here's the CSS variables for your color palette:
That's it. You're all set to use these colors in your stylesheets:
var(--default)
var(--heading)var(--link)var(--accent)
var(--warning)
They'll automatically switch between Light and Dark mode based
on a person's preference whenever possible. You can also append
each one with either
-faded or
-faded2 to get the faded versions of
the colors. Here's example of what a style might look like:
h1 {
background-color: var(--default-faded2);
border-bottom: 1px solid var(--accent);
color: var(--heading);
}
I've always struggled with picking colors. There's a bunch of tools out there. None of them worked for me. Most of it came down to not being able to see the color changes directly on a page. This picker is designed that in mind. I hope you enjoy using it.
-a
I love making websites. I've got a bunch and make more all the time. This is the current collection of styles I use to get started with a new one:
The collection includes variables and classes for the colors from the picker along with some for blacks and whites. It also includes a bunch of basic layout variables and classes.
Some folks have Very Strong Opinions about using utility styles directly on elements. Getting into debates about that is tedious and boring. I'd rather spend my time making things. These styles help me do that. Check 'em out if you're interested.
A few quick examples from the utility styles
The black and white variables and classes are just what they say they are.
The match and reverse are also black and white. Which one they render as is dependent on the color mode. In Light mode, match is white and reverse is black. In Dark mode, match becomes black and reverse becomes white.
I use these almost all the time over the static black and white.
--COLOR-background,
--COLOR-background-faded, and
--COLOR-background-faded2. Where
COLOR
can be one of: default, headline, link, accent, warning,
black, white, match, or reverse.
Borders work similar to backgrounds but have an optional direction associate with them.
Padding and Margins have the format:
SIZE-DIRECTION-PAD/MARGIN. For
example:
This is my collection of utility styles wrapped in a basic HTML page. I copy and paste this to get started working on a new site.
There's very little too it. It's purpose is not to do everything. It's only to reduce a little of the friction of getting started.
The output always includes both light and dark mode. Getting that set up was one of the driving factors behind building the picker.
I prefer dark mode. There are folks with vision difficulties for whom that's inaccessible. With the wide spread availability of prefers-color-scheme there's an increasing argument that it's negligent not to provide both modes for automatic switching at a minimum.
The h (hue) slider in the Background box also changes the colors available in the grid of set colors in the Colors box.
The hue value in an OKLCH's color is a number between 0 and 360. The slider in the Background box sets the base number. The first row in the gird of set colors add 45 to the base. The second row adds 45 more, etc... (If the number goes over 360 it loops around)
Columns in the grid of set colors increase the lightness value of the corresponding hue. The farthest left column is 20% lightness. The farthest right is 100%. The values in the middle are spaced at even intervals.
I bumped the lower value to up 20% to prevent the entire column from becoming basically black. (Depending on the chroma value, colors set here with a 0% light level can still show some color. They are all very dark though.)
You can get pure white out of any hue by setting the Colors' chroma slider all the way to the left and picking any set from the right hand column.
The Background l slider covers the full range of lightness from 0 - 100%. Setting it all the way to the left with the c slider all the way to the left too will give you pure black.
If you need a pure black foreground color you'll need to add it yourself. (I include it in my utility styles)
There's more complexity to OKLCH colors than is represented here. The sliders can be set in ways that are outside the actual color space. Fallback colors are used whenever that happens.
It's possible to set up an interface that wouldn't allow colors outside the color space. It would be way more complicated to use (see oklch.com for an example). I opted to keep the interface simpler knowing the fallbacks would take care of things.