Fish's Absolute Beginner's Guide To Colors

Link to article: Fish's Absolute Beginner's Guide To Colors.

```
#page-title{display:none}
```

```
color:blue
```

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

```
color:saddlebrown
```
```
color:maroon
```
```
color:navy
```

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

```
color: rgba(0, 0, 255, 1)
```
```
color: rgba(0, 0, 255, 0.5)
```
```
color: rgba(0, 0, 255, 0.2)
```

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

```
color: hsla(10deg, 100%, 50%, 1)
```
```
color: hsla(200deg, 100%, 50%, 1)
```
```
color: hsla(300deg, 100%, 50%, 1)
```
```
color: hsla(200deg, 100%, 50%, 1)
```
```
color: hsla(200deg, 60%, 50%, 1)
```
```
color: hsla(200deg, 10%, 50%, 1)
```
```
color: hsla(200deg, 100%, 50%, 1)
```
```
color: hsla(200deg, 100%, 80%, 1)
```
```
color: hsla(200deg, 100%, 20%, 1)
```

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

```
color:lightgrey;background:grey
```

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

```
color:white;background:black
```

border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;

```
color:red;background:green
```
```
margin:400px
```

(none)

[[include :scp-wiki:component:toggle-sidebar]]
[[module css]]
#page-title{display:none}
[[/module]]
[[>]]
[[module rate]]
[[/>]]
[[include :scp-wiki:component:author-label-source start=--
|name=Fish^12]]
Third essay. And this is my [http://scp-wiki.wikidot.com/hotfish| Author Page]!
[[include :scp-wiki:component:author-label-source end=--]]

Hey kid.

I’m [[*user Fish^12]]. Wanna learn CSS? This is the third installment of my CSS series. Make sure you're properly caught up before reading this guide.

This time, we're going to be talking about color. One step closer to making themes.

**Preface:** This guide is intended for beginners. If you know about color formatting and color accessibility, then you can downvote this guide. Additionally, this guide will not be talking about design, just the colors themselves.

@@ @@

@@ @@

[[=]]
+ THE COLORS
[[/=]]

CSS is a very visual medium; you're going to be working with design and aesthetic constantly, which means that we have to learn how color works, both in a literal and figurative sense.

Unfortunately, aesthetic and color theory will have to come later. For now, we must do the absolute minimum.

We will start with how to make colors.

@@ @@ [[span style="color:blue"]]"I'm blue!"[[/span]]

This is blue text. But there are multiple ways to make blue.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.colloquialColoredText {
@@ @@ @@ @@ @@ @@ color: blue;
}

[[/div]]

This is the simplest way. CSS has over a hundred named colors built-in to the language for ease of access. [https://developer.mozilla.org/en-US/docs/Web/CSS/named-color This resource] lists out every single named color and what they look like.

@@ @@ [[span style="color:saddlebrown"]]"I'm saddlebrown!"[[/span]]

@@ @@ [[span style="color:maroon"]]"And I'm maroon!"[[/span]]

@@ @@ [[span style="color:navy"]]"I'm navy!"[[/span]]

As long as you have a colloquial name, this one is very easy to intuit. That said, it has limited functionality; if you want a slightly lighter blue or a darker yellow, this won't help you much.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.hexColoredText {
@@ @@ @@ @@ @@ @@ color: #0000FF;
}

[[/div]]

Hex codes! Hexadecimal relies on a range of values between {{00}} and {{FF}}, which represents 0 to 255.

In essence, the hex code can be broken up into three equal sections; Red, Green, and Blue respectively (RGB). So, you can imagine that #0000FF means 0 red, 0 green, and 255 blue, making the text blue.

That said, it's difficult to intuitively mix these in your head; without a clear knowledge of color mixing and then translating that into hexadecimal, you will probably be relying on color pickers to help select hex codes. Which leads to the next format.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.roygeebivColoredText {
@@ @@ @@ @@ @@ @@ color: rgba(0, 0, 255, 1);
}

[[/div]]

RGBA! Rather than relying on hexadecimal, you have a clear, mathematical display of all colors. Just set a value between 0 and 255. It also adds a fourth modifier called Alpha, which ranges from 0 to 1. The Alpha value represents opacity; how solid or transparent the color is.

@@ @@ [[span style="color: rgba(0, 0, 255, 1)"]]"I'm solid blue!"[[/span]]

@@ @@ [[span style="color: rgba(0, 0, 255, 0.5)"]]"I'm blue, but half transparent!"[[/span]]

@@ @@ [[span style="color: rgba(0, 0, 255, 0.2)"]]"My existence is barely tangible!"[[/span]]

That said, this one still requires you to have a decent knowledge of color mixing to maximize the use of. Maybe you want the best solution to intuiting colors.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.hassleColoredText {
@@ @@ @@ @@ @@ @@ color: hsla(240deg, 100%, 50%, 1);
}

[[/div]]

This one is a handful to explain. HSLA stands for Hue, Saturation, Light, and Alpha.

Hue relies on a 360 degree range, which maps the rainbow onto a conic gradient. Red is 0deg, Yellow is 60deg, Green is 120deg, Cyan is 180deg, Blue is 240deg, and Purple is 300deg, before wrapping back around to Red.

@@ @@ [[span style="color: hsla(10deg, 100%, 50%, 1)"]]"I'm 10deg!"[[/span]]

@@ @@ [[span style="color: hsla(200deg, 100%, 50%, 1)"]]"I'm 200deg!"[[/span]]

@@ @@ [[span style="color: hsla(300deg, 100%, 50%, 1)"]]"I'm 300deg!"[[/span]]

Saturation relies on a 0% to 100% range, which maps the intensity of a given color. At 0%, the color is gray, while 100% is the original color.

@@ @@ [[span style="color: hsla(200deg, 100%, 50%, 1)"]]"I'm 100%!"[[/span]]

@@ @@ [[span style="color: hsla(200deg, 60%, 50%, 1)"]]"I'm 60%!"[[/span]]

@@ @@ [[span style="color: hsla(200deg, 10%, 50%, 1)"]]"I'm incredibly sad!"[[/span]]

Light also relies on a 0% to 100% range, which dictates the brightness of a color. At 0%, the color is black, while 100% is white.

@@ @@ [[span style="color: hsla(200deg, 100%, 50%, 1)"]]"I'm 50%. Just right!"[[/span]]

@@ @@ [[span style="color: hsla(200deg, 100%, 80%, 1)"]]"I'm 70%. Too bright!"[[/span]]

@@ @@ [[span style="color: hsla(200deg, 100%, 20%, 1)"]]"I'm 30%. Too dark!"[[/span]]

It takes a little getting used to, but HSLA is the most intuitive of the different color formatting choices. HSLA also makes it easier to create color palettes, since you only need to change one or two values in order to create an accent. For example, if I have a cyan div, all I need to do is manipulate the Light or Saturation to create a darker version of cyan to create a box shadow.

**Note:** There are a bunch of different formats for colors out there. These one's are typically easiest to understand and are used most often on the wiki.

----

You have all these choices for colors, but there is no one correct method. Use whatever is comfortable for you to use and is appropriate for your needs. For example, if you're collabing with another person, it's probably best to use formatting you both will understand.

@@ @@

@@ @@

[[=]]
+ THE ACCESSIBILITY
[[/=]]

Ah shit. It's the hard part.

It's easy to pick and choose colors, it's harder to pick and choose the right colors. We will be going over various tools and tips to enable accessibility.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.badText {
@@ @@ @@ @@ @@ @@ color: lightgrey;
@@ @@ @@ @@ @@ @@ background: grey;
}

[[/div]]

@@ @@ [[span style="color:lightgrey;background:grey"]]This is not readable![[/span]]

[https://scp-wiki.wikidot.com/css-policy CSS policy] dictates that all text should be readable. The main method with which to measure this is the [https://www.achecks.org/apca-accessible-colour-contrast-checker/ Color Contrast Checker], which measures the ratio between font color and background.

In the ideal scenario, you shouldn't even need to use the calculator; your color choices should already be easy to read. If you have to measure it to ensure compliance, then that's a sign that you should probably change your color palette.

It's better to have something readable and not skirt the line of what is //technically// accessible.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.badText {
@@ @@ @@ @@ @@ @@ color: white;
@@ @@ @@ @@ @@ @@ background: black;
}

[[/div]]

@@ @@ [[span style="color:white;background:black"]]This is too jarring.[[/span]]

On a similar note, we can't have colors that are too contrasted.

Even though this is technically readable, it strains the eyes; white on black is the largest contrast you can physically get. The reason why pure white and pure black is rarely used in web design is because of this. Instead, you're typically going to be using an off white and off black.

[[div style="border:2px dashed grey; padding:0 1em;margin:auto;line-height:1.1;"]]

.badText {
@@ @@ @@ @@ @@ @@ color: red;
@@ @@ @@ @@ @@ @@ background: green;
}

[[/div]]

@@ @@ [[span style="color:red;background:green"]]This is red/green colorblind.[[/span]]

On top of having terrible color contrast, this is also impossible to see for people with red/green colorblindness. In order to improve accessibility, [https://davidmathlogic.com/colorblind/#%23D81B60-%231E88E5-%23FFC107-%23004D40 this website] is a handy tool for choosing color palettes that can handle common types of colorblindness.

A quick reference list of bad color combinations to use:

* Red / Green
* Red / Brown
* White / Yellow
* Blue / Purple

**Note:** This doesn't mean //never// use these colors elsewhere. If you're using a rainbow background, you obviously don't need to worry about the gradient between blue and purple. It just means that you shouldn't have blue text on purple background for the sake of readability.

Additionally, you should not rely on color alone to convey meaning. ##red|Stop## and ##green|Go## are both colored, but they also have text and shapes associated with them to keep their intentions clear. You can also use patterns, symbols, or images.

@@ @@

@@ @@

[[=]]
+ CONCLUSION
[[/=]]

At the end of the day, I can go on and on about color theory or whatever, but all that really matters is if the colors look good. These are all rules of thumb, and should be taken with a grain of salt.

[https://scp-wiki.wikidot.com/fish-s-absolute-beginners-guide-to-units Next article].

[[div style="margin:400px"]]
[[/div]]

[[include :scp-wiki:component:license-box]]
[[include :scp-wiki:component:license-box-end]]

Fish's Absolute Beginner's Guide To Colors

Module Styles

Inline Styles

Includes

CSS Classes

Page Source