Color Picker Preview Window
Welcome to Alan's Color Picker Preview Window!
I'm not good at being able to determine how a color palette will work just by looking at swatches. I need to see it for real. That's what this page is for. The picker generates a stylesheet that this page uses directly.
Details And Examples
Overview
Palettes consist of a base/background color, six related colors, and black and white CSS prop variables. There are versions of each color going from 10% to full opacity. This is the current set. Play around with the picker and the colors will update live here.
A full style sheet
The color picker is designed to generate styles for both a light and a dark mode. Each mode is completely independent. There are buttons beside the sliders to easily get a value from the alternate mode for optional syncing.
The output style sheet includes CSS variable properties for both light and dark mode. Light mode is the default. If a system preference is available that gets used.
Base colors: There are six base colors for each palette: --color-alfa, --color-bravo, --color-charlie, --color-delta, --color-echo, and --color-foxtrot. I find these generic names easier to work with than names like "primary", "secondary", "accent", etc... Those names have specific meaning and I often find I want to use a color when the meaning doesn't fit. Here's what they look like for this palette:
Why Not Numbers? For a similar reason. Numbers imply order which I often think of as priority when it comes to design. Trying to remember what priority or level I each color is is harder for me to do then remembering them with the name. Sure, there's an implicit order with the alfa, bravo, charlie... names, but it's a lot easier for me to remember that ".color-charlie" is green than ".color-4"
Black and White - Match and Reverse
In addition to --color-black and --color-white, the stylesheet also was --color-bw-match and --color-bw-reverse.
Light Mode:
- --color-bw-match is white
- --color-bw-reverse is black
Dark Mode:
- --color-bw-match is black
- --color-bw-reverse is white
The idea with these is you can add a border to something that's black when the page is in light mode and will flip to white when the page goes into dark mode.
Heading Underline Examples
This example contains several sections that each have a heading with the alfa color and then one of the other five colors used for a one pixel border underline. There's a bunch of place holder text between heading to help reduce visual noise from the other headings.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius et mi a varius. Donec porta pharetra nunc tempor semper. Cras sollicitudin dignissim dolor, vitae tempus nisi gravida et. Praesent elit ipsum, vulputate id blandit at, condimentum quis tellus. Donec vel est porta.
Sagittis risus sed, efficitur neque. Maecenas risus risus, tempor ac urna iaculis, facilisis tristique mi. Aliquam vel rhoncus eros. Nam blandit dictum est, ut euismod elit posuere sed. Donec hendrerit, est suscipit scelerisque tempus, purus ante efficitur ex, a maximus felis massa sed odio. Proin ut bibendum ex, a tristique diam. Donec suscipit, dui a semper sagittis, turpis dui fringilla libero, in cursus orci arcu consectetur purus.
Praesent ac venenatis diam. Cras venenatis enim vitae justo porttitor condimentum. Maecenas sit amet tincidunt augue. Phasellus luctus, mi ut tincidunt feugiat, justo elit vulputate metus, ut sagittis urna dui ac mi. Nunc rhoncus lorem eros, porttitor ullamcorper magna pellentesque eget. Aenean scelerisque eget felis eget pellentesque. Cras non massa tellus.
Link Examples
This example contains several paragraphs with links in the different colors. The main body text is bravo so the examples are alfa, charlie, delta, echo, foxtrot.
Lorem ipsum alfa link dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus nunc eu leo consectetur, quis tempor nunc pretium. Phasellus commodo vitae libero a tristique. Maecenas quis neque malesuada leo rutrum luctus alfa link id et ante. Donec turpis tortor, feugiat in condimentum in, pharetra ut quam. Vestibulum rutrum sem et orci blandit sodales. Proin faucibus pellentesque elementum.
Sed enim charlie link massa, pellentesque a tempor vitae, pulvinar nec elit. Nulla turpis neque, interdum et pulvinar nec, ullamcorper at orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere charlie link cubilia curae; Fusce sem magna, rhoncus quis ex in, imperdiet euismod nulla. Aenean consectetur nunc eu quam aliquet fermentum. Nulla ac placerat turpis. Nam odio arcu, dapibus vel posuere ac, aliquet eu lorem. Donec et viverra diam.
Aliquam erat delta link volutpat. Sed interdum euismod commodo. Aenean lacus erat, ultrices in dapibus ut, posuere vitae nulla. Vestibulum at pulvinar quam. Etiam dictum sapien bibendum, semper tellus. Praesent sollicitudin maximus aliquam. Nulla quis posuere ante. Maecenas in purus sit amet odio ornare delta link sollicitudin. Vestibulum ligula urna, ultricies sed efficitur vel, fermentum ut lorem. In augue ligula, posuere id diam vitae, pellentesque auctor ipsum.
Mauris ut echo link urna ut risus euismod varius sit amet quis risus. Aenean ut malesuada purus. Sed vitae ornare dolor, mollis ultrices metus. Praesent tincidunt nisi a erat sodales mollis. Nunc vulputate finibus eros, vitae posuere nisi porttitor at. Nunc nec nisi malesuada, facilisis augue id, placerat sem. Nam felis echo link eros, faucibus eget tellus a, finibus aliquam mauris. Aenean facilisis neque odio, ut ultrices ante laoreet eu. Phasellus fermentum elit sit amet ultrices egestas.
In nulla foxtrot link et leo quis urna gravida malesuada sed quis nisl. In dapibus dolor dignissim neque aliquam, non vulputate metus consectetur. Donec commodo laoreet accumsan. Vivamus vitae dolor mauris. Nunc non sollicitudin nulla. Suspendisse porta velit a vulputate interdum. Aenean bibendum ut ex id vulputate. Vivamus finibus vitae erat eu semper. Sed dui augue, foxtrot link tincidunt ut aliquet ac, euismod ut magna. Duis volutpat odio a semper lacinia. Integer turpis eros, accumsan non consequat et, dictum nec tellus.
Link Examples
This is the same as the prior example, but the links have been bolded.
Lorem ipsum alfa link dolor sit amet, consectetur adipiscing elit. Pellentesque dapibus nunc eu leo consectetur, quis tempor nunc pretium. Phasellus commodo vitae libero a tristique. Maecenas quis neque malesuada leo rutrum luctus alfa link id et ante. Donec turpis tortor, feugiat in condimentum in, pharetra ut quam. Vestibulum rutrum sem et orci blandit sodales. Proin faucibus pellentesque elementum.
Sed enim charlie link massa, pellentesque a tempor vitae, pulvinar nec elit. Nulla turpis neque, interdum et pulvinar nec, ullamcorper at orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere charlie link cubilia curae; Fusce sem magna, rhoncus quis ex in, imperdiet euismod nulla. Aenean consectetur nunc eu quam aliquet fermentum. Nulla ac placerat turpis. Nam odio arcu, dapibus vel posuere ac, aliquet eu lorem. Donec et viverra diam.
Aliquam erat delta link volutpat. Sed interdum euismod commodo. Aenean lacus erat, ultrices in dapibus ut, posuere vitae nulla. Vestibulum at pulvinar quam. Etiam dictum sapien bibendum, semper tellus. Praesent sollicitudin maximus aliquam. Nulla quis posuere ante. Maecenas in purus sit amet odio ornare delta link sollicitudin. Vestibulum ligula urna, ultricies sed efficitur vel, fermentum ut lorem. In augue ligula, posuere id diam vitae, pellentesque auctor ipsum.
Mauris ut echo link urna ut risus euismod varius sit amet quis risus. Aenean ut malesuada purus. Sed vitae ornare dolor, mollis ultrices metus. Praesent tincidunt nisi a erat sodales mollis. Nunc vulputate finibus eros, vitae posuere nisi porttitor at. Nunc nec nisi malesuada, facilisis augue id, placerat sem. Nam felis echo link eros, faucibus eget tellus a, finibus aliquam mauris. Aenean facilisis neque odio, ut ultrices ante laoreet eu. Phasellus fermentum elit sit amet ultrices egestas.
In nulla foxtrot link et leo quis urna gravida malesuada sed quis nisl. In dapibus dolor dignissim neque aliquam, non vulputate metus consectetur. Donec commodo laoreet accumsan. Vivamus vitae dolor mauris. Nunc non sollicitudin nulla. Suspendisse porta velit a vulputate interdum. Aenean bibendum ut ex id vulputate. Vivamus finibus vitae erat eu semper. Sed dui augue, foxtrot link tincidunt ut aliquet ac, euismod ut magna. Duis volutpat odio a semper lacinia. Integer turpis eros, accumsan non consequat et, dictum nec tellus.
Code Blocks
I make a lot of programming code blocks in my content. This is a prototype attempt at autogenerating variables with styles for them. They are based off the bravo color assuming that's what will be used for the main body text. (I'll probably end up adding another slider or two here to tweak these a bit)
The styles are:
- --code-block-base (sample)
- --code-block-line-numbers
- --code-block-border
- --code-block-alfa
- --code-block-bravo
- --code-block-charlie
- --code-block-delta
- --code-block-echo
- --code-block-foxtrot
- --code-block-golf
- --code-block-hotel
- --code-block-india
- --code-block-juliet
- --code-block-kilo
- --code-block-lima
- --code-block-mike