Forem: Vinay Pillai

An LCH Color library and theme designer

Vinay Pillai — Sat, 30 May 2020 17:41:20 +0000

So if you've seen my post on the LCH color space, you know that making the switch to LCH colors can help resolve some common design issues stemming from vanilla RGB, HEX, and HSL color models (basically LCH's perceptual uniformity makes it easier to select colors that have the same visual feel). Thanks to some iterative improvements, the color library I was working on then now has support for a few more colorspaces, including two flavors of LCH.

vinaypillai / ac-colors

ac-colors is a reactive JavaScript color library that can freely convert between RGB, HSL, HEX, XYZ, LAB, LCHab, LUV, and LCHuv, as well as handle random color generation and contrast ratio calculation.

ac-colors

ac-colors is a reactive JavaScript color library that can freely convert between sRGB, HSL, HEX, XYZ, LAB, LCHab, LUV, and LCHuv, as well as handle random color generation and contrast ratio calculation. A live color picker running on ac-colors can be found at http://colors.acutecomponents.com/.

Installation

Node.js

npm install --save ac-colors

Browser

Download

Download the minified transpiled ac-colors.min.js and include it in a <script> tag

<script src="ac-colors.min.js"></script>

CDN

Alternatively add this <script> tag to your body to load…

View on GitHub

I've also recently been working on an LCH theme designer, which I've found to be quite useful when choosing colors for UI components on some of the projects I'm working on.

It defaults to LCHuv mode, featuring colors with independent incremental changes to their hue, chroma/saturation, and luminance/lightness, which is great for things like selecting a color for a button's disabled state, or choosing a shade of red for an error notification that matches look of your other notifications. Changing a color's component parts independently (such as the its luminance values in LCH mode or red values in RGB mode) makes exploring the niches of different color models pretty easy.

Part 2: The Anatomy of a Tag

Vinay Pillai — Tue, 26 May 2020 16:50:38 +0000

Last time on The Anatomy of Web Design, we discussed the idea of tags in HTML. There I stated that tags usually come in opening tag-closing tag pairs, which mark the beginning and end of an element. For instance, these opening and closing <p> tags mark the start and end of a paragraph:

<p>
    I’m a paragraph, at least in name if nothing else. 
    See, I have more than one sentence.
</p>

However, some elements only have a start tag. These void elements don’t directly have any content inside them, but can be used to embed media, add metadata, provide formatting cues, or link other files to the page.

The `<img>` tag

Let’s take a look at one of the more common void elements: the image tag <img>.

<img>

Well that was a bit anti-climactic. The thing is, the <img> tag can’t do much in its current form. It needs additional data in order to work properly, for instance the source url for the image or some alternative text to show if the image can’t be loaded. The way we specify that data is through…

Attributes

Attributes provide a way to add specific characteristics to an element. They are listed as key-value pairs in an element’s starting tag.

<tag attribute1="value1" attribute2="value2"></tag>

Keep in mind some of the formatting rules attributes require:

Attributes are added after the element's name in the start tag.
The attribute and its value are separated by an '=' sign.
Although the name of the attribute should not be placed in quotes, its value should be.
An element can have more than one attribute, but they must be separated by spaces.

So now that we have a rough understanding of what attributes look like, let’s try to add some to our <img> tag to load an image.

<img src="https://www.publicdomainpictures.net/pictures/90000/velka/planet-venus.jpg" 
alt="The planet Venus">

The <img> tag requires two attributes:

src - The source url of the image
alt - Alternate text to display if the image fails to load, and to better meet web accessibility standards.

Since we now have a fully functioning image tag, lets try adding it to our page from last time

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <p>I'm a paragraph.</p>
        <img src="https://www.publicdomainpictures.net/pictures/90000/velka/planet-venus.jpg" alt="The planet Venus">
    </body>
</html>

Once you save your .html file and open it in the browser, you should see something like this. As you can see, I clearly underestimated the size of this image, but that’s not a problem we’re going to concern ourselves with at the moment. For now, try experimenting with image tags -- see what happens if you break the url, for instance -- and next time we’ll talk about headings in HTML.

Part 1: The Anatomy of HTML

Vinay Pillai — Sat, 23 May 2020 03:07:18 +0000

Having spent the better part of the past few days answering questions about HTML, CSS, and JavaScript, I figured I’d write a series to help a beginner progress from knowing nothing about web development (and/or coding in general), to being able to kinda sorta make a website, to having a strong foundational understanding of what goes into building the front and backend of a website and a somewhat decent grasp of what the current landscape of web technologies looks like. But anyways, that’s enough of an intro, let's get started.

What is HTML?

In the grand scale of things, HTML serves as the structure for your website. HTML stands for HyperText Markup Language, so let’s try to break down what that means exactly, starting with “HyperText.” It’s text with a link. That’s all it is. Then we have the second part: “Markup Language.” In order for your browser to know how to structure the content on your page, you have to annotate it with tags, which raises the question...

What is a tag?

Tags in HTML usually come in pairs: you have opening tags and you have closing tags. Opening tags consist of a “<”, a word, and then a “>”. Closing tags differ slightly, as they have a “/” before the word (eg. “</section>” ). There are, of course, exceptions to this rule but that's a topic for a later time. Anything in between a tag’s opening and closing is considered to be inside that tag. Tags can be nested inside each other, for instance:

<outer>
    <inner>I’m a inner tag</inner>
</outer>

Quick note: It is generally a best practice to indent every time you nest a tag inside another tag.

Making your first .html file

Though it might be hard to believe, your HTML code typically goes in a .html file. In order to make a .html file, you’re going to need a text editor of some sort. My personal preference is Sublime Text, but you can use Notepad or TextEdit or Notepad++ or MS Paint, it doesn't matter.

Once you have that set up, start off by making a new file and saving it as <filename>.html (pick a filename). After you have it saved, open it in the browser. If you’re using Sublime Text, that’s as easy as right-clicking and selecting “Open in Browser,” but if not then locate it in your files and open with your browser of choice. Technically at this stage you have accomplished the objective but let’s try to do a bit more.

Quick note: Typically you want to name your html files index.html, since that is the default directory file loaded by a web server.

The Document Type Declaration

Now the first line of pretty much every HTML file you write is going to be the same, and it’s not a tag.

<!DOCTYPE html>

This line tells the browser what kind of data to expect, in this case html, and ensures that it follows the proper standards when rendering your content.

The `<html>` tag

The first actual tag for your .html file is...the html tag. This tag acts as the root element, so all your other tags will be nested inside it.

<!DOCTYPE html>
<html></html>

The `<head>` and `<body>` tags

Now inside your html tag we need to add two tags: the head tag and the body tag.

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

The head tag is used to store information about the page, such as the page’s title, additional metadata, links to supporting files, etc. For now we’re not going to worry about that. What we do care about is the body tag, where all our content is going to go.

Adding some text

Lastly, let’s add some text to our web page. The tag we’re going to use to wrap our text is the <p> tag, for paragraphs.

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <p>I’m a paragraph.</p>
    </body>
</html>

Wrapping up

And now, we’re done. Once you save, you can reopen your .html file in the browser, or just try refreshing the page, and you should see some text. Hopefully you guys find this introduction to be moderately useful, and next time we’ll get started with some more information about tags.

LCH colors and why you should be using them (plus a package to help)

Vinay Pillai — Tue, 19 May 2020 08:47:58 +0000

Recently a friend had asked me to teach him some of the basics of web design. As we started progressing into styling different elements with CSS, he experienced firsthand the shortcomings of using the HSL (Hue, Saturation, Lightness) color picker in Chrome’s Inspect Elements. Even though he was only changing the hue, the colors he was getting ended up being much lighter or darker than what he started with. Thanks to some neat (or perhaps unfortunate) color science, the HSL color space model is not perceptually accurate, which can lead to problems designing color themes. Luckily, there’s a solution…

What is LCH

To put it (relatively) simply LCH (Luminance, Chroma, Hue) is a color space that is designed to be perceptually accurate. This means that by only changing, for instance, a color’s luminance, you will not impact its saturation or its tone. Now onto an example.

Let’s pretend that you’ve created a submit button whose background color is the always classic green ‘#00c45c’. Some time passes and you decide you don’t want a green submit button, you want an orange one. So you convert to hsl, and toggle the hue until you have the tone that you want. Unfortunately, things have hit a snag: your new orange is not only visually much darker than your old button was, but also a bit desaturated. What can you do?

One way to solve the problem is to start with our original shade of green. If we convert that to LCH, then it's easy to just toggle hue values until you get an orange that you like, all without losing the same visual pop you had from your old button.

Another solution is to start with our new shade of orange and work backwards. Once we convert it to LCH, it’s easy to see that our luminance (lightness), and chroma (saturation) are much lower than where we started. By adjusting those two values and leaving the hue the same, we end up with the same result as before.

How to convert to LCH

Converting to LCH can be a bit of a pain. You have to map your RGB values to XYZ, then to LAB (or LUV), and then finally to LCHab (or LCHuv). That’s why I wrote this JavaScript color library to handle the conversions reactively. After instantiating a Color object with an RGB, HEX, HSL, XYZ, LAB, or LCHab color, it will automatically update all its properties to reflect the proper conversions. Plus it offers some other useful features like random color generation and contrast ratio calculations. But regardless of how you do it, I hope making the switch to LCH helps ease some of the issues you can run into when designing your components.