diff --git a/files/en-us/web/html/applying_color/index.html b/files/en-us/web/html/applying_color/index.html deleted file mode 100644 index b346ef19113be1f..000000000000000 --- a/files/en-us/web/html/applying_color/index.html +++ /dev/null @@ -1,509 +0,0 @@ ---- -title: Applying color to HTML elements using CSS -slug: Web/HTML/Applying_color -tags: - - Beginner - - CSS - - CSS Colors - - Guide - - HTML - - HTML Colors - - HTML Styles - - Styling HTML - - color ---- -
This article is a primer introducing each of the ways CSS color can be used in HTML.
- -The use of color is a fundamental form of human expression. Children experiment with color before they even have the manual dexterity to draw. Maybe that's why color is one of the first things people often want to experiment with when learning to develop websites. With CSS, there are lots of ways to add color to your HTML elements to create just the look you want.
- -We're going to touch on most of what you'll need to know when using color, including a {{anch("Things that can have color", "list of what you can color and what CSS properties are involved")}}, {{anch("How to describe a color", "how you describe colors")}}, and how to actually {{anch("Using color", "use colors both in stylesheets and in scripts")}}. We'll also take a look at how to {{anch("Letting the user picka color", "let the user pick a color")}}.
- -Then we'll wrap things up with a brief discussion of how to {{anch("Using color wisely", "use color wisely")}}: how to select appropriate colors, keeping in mind the needs of people with differing visual capabilities.
- -At the element level, everything in HTML can have color applied to it. Instead, let's look at things in terms of the kinds of things that are drawn in the elements, such as text and borders and so forth. For each, we'll see a list of the CSS properties that apply color to them.
- -At a fundamental level, the {{cssxref("color")}} property defines the foreground color of an HTML element's content and the {{cssxref("background-color")}} property defines the element's background color. These can be used on just about any element.
- -Whenever an element is rendered, these properties are used to determine the color of the text, its background, and any decorations on the text.
- -color
property as their colors. However, you can override that behavior and use a different color for them with the text-decoration-color
property.Every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have.
- -Any element can have a border drawn around it. A basic element border is a line drawn around the edges of the element's content. See {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article Styling borders using CSS to learn more about applying styles to borders.
- -You can use the {{cssxref("border")}} shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its width, style (solid, dashed, etc.), and so forth.
- -border-inline-start-color
is applied to the right side of the border.CSS isn't the only web technology that supports color. There are graphics technologies that are available on the web which also support color.
- -In order to represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.
- -For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.
- -A set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as red
, blue
, or orange
), shades of gray (from black
to white
, including colors like darkgray
and lightgrey
), and a variety of other blended colors including lightseagreen
, cornflowerblue
, and rebeccapurple
.
See {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.
- -There are three ways to represent an RGB color in CSS.
- -Hexadecimal string notation represents a color using hexadecimal digits to represent each of the color components (red, green, and blue). It may also include a fourth component: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components must be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, "#D"
becomes "#DD"
when drawing.
A color in hexadecimal string notation always begins with the character "#"
. After that come the hexadecimal digits of the color code. The string is case-insensitive.
"#rrggbb"
0xrr
, green component is 0xgg
, and blue component is 0xbb
."#rrggbbaa"
0xrr
, green component is 0xgg
, and blue component is 0xbb
. The alpha channel is specified by 0xaa
; the lower this value is, the more translucent the color becomes."#rgb"
0xrr
, green component is 0xgg
, and blue component is 0xbb
."#rgba"
0xrr
, green component is 0xgg
, and blue component is 0xbb
. The alpha channel is specified by 0xaa
; the lower this value is, the more translucent the color becomes.As an example, you can represent the opaque color bright blue as "#0000ff"
or "#00f"
. To make it 25% opaque, you can use "#0000ff44"
or "#00f4"
.
RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function {{cssxref("color_value", "rgb()", "#rgb()")}}. This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.
- -Legal values for each of these parameters are:
- -red
, green
, and blue
alpha
For example, a bright red that's 50% opaque can be represented as rgb(255, 0, 0, 0.5)
or rgb(100%, 0, 0, 50%)
.
Designers and artists often prefer to work using the {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) color method. On the web, HSL colors are represented using HSL functional notation. The hsl()
CSS function is very similar to the rgb()
function in usage otherwise.
The diagram below shows an HSL color cylinder. Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user SharkD on Wikipedia, distributed under the CC BY-SA 3.0 license.
- - - -The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("<angle>")}} unit supported by CSS, including degrees (deg
), radians (rad
), gradians (grad
), or turns (turn
). But this doesn't control how vivid or dull, or how bright or dark the color is.
The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.
- -Think of it like creating the perfect paint color:
- -You can also optionally include an alpha channel, to make the color less than 100% opaque.
- -Here are some sample colors in HSL notation:
- - - -<table> - <thead> - <tr> - <th scope="col">Color in HSL notation</th> - <th scope="col">Example</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>hsl(90deg, 100%, 50%)</code></td> - <td style="background-color: hsl(90deg, 100%, 50%);"> </td> - </tr> - <tr> - <td><code>hsl(90, 100%, 50%)</code></td> - <td style="background-color: hsl(90, 100%, 50%);"> </td> - </tr> - <tr> - <td><code>hsl(0.15turn, 50%, 75%)</code></td> - <td style="background-color: hsl(0.15turn, 50%, 75%);"> </td> - </tr> - <tr> - <td><code>hsl(0.15turn, 90%, 75%)</code></td> - <td style="background-color: hsl(0.15turn, 90%, 75%);"> </td> - </tr> - <tr> - <td><code>hsl(0.15turn, 90%, 50%)</code></td> - <td style="background-color: hsl(0.15turn, 90%, 50%);"> </td> - </tr> - <tr> - <td><code>hsl(270deg, 90%, 50%)</code></td> - <td style="background-color: hsl(270deg, 90%, 50%);"> </td> - </tr> - </tbody> -</table>- -
{{EmbedLiveSample("HSL_functional_notation", 300, 260)}}
- -Note: When you omit the hue's unit, it's assumed to be in degrees (deg
).
Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.
- -The easiest way to apply color to elements—and the way you'll usually do it—is to specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.
- -Let's take a look at an example, starting by looking at the results we're trying to achieve:
- -The HTML responsible for creating the above example is shown here:
- -<div class="wrapper"> - <div class="box boxLeft"> - <p> - This is the first box. - </p> - </div> - <div class="box boxRight"> - <p> - This is the second box. - </p> - </div> -</div>- -
This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <div>
s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.
The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.
- -We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.
- -.wrapper { - width: 620px; - height: 110px; - margin: 0; - padding: 10px; - border: 6px solid mediumturquoise; -}- -
The .wrapper
class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes the size of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.
Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color mediumturquoise
.
Our two colored boxes share a number of properties in common, so next we establish a class, .box
, that defines those shared properties:
.box { - width: 290px; - height: 100px; - margin: 0; - padding: 4px 6px; - font: 28px "Marker Felt", "Zapfino", cursive; - display: flex; - justify-content: center; - align-items: center; -}- -
In brief, .box
establishes the size of each box, as well as the configuration of the font used within. We also take advantage of CSS Flexbox to easily center the contents of each box. We enable flex
mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to center
. Then we can create a class for each of the two boxes that defines the properties that differ between the two.
.boxLeft { - float: left; - background-color: rgb(245, 130, 130); - outline: 2px solid darkred; -}- -
The .boxLeft
class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:
rgb(245, 130, 130)
.border
, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as border
does. This outline is a solid, dark red line that's two pixels thick. Note the use of the darkred
keyword when specifying the color..boxRight { - float: right; - background-color: hsl(270deg, 50%, 75%); - outline: 4px dashed rgb(110, 20, 120); - color: hsl(0deg, 100%, 100%); - text-decoration: underline wavy #88ff88; - text-shadow: 2px 2px 3px black; -}- -
Note: When you try to show it in Safari, it will not show properly. Because Safari doesn't support text-decoration: underline wavy #88ff88
.
Finally, the .boxRight
class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:
background-color
is set using the HSL value specified using hsl(270deg, 50%, 75%)
. This is a medium purple color.outline
is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (rgb(110, 20, 120)
).hsl(0deg, 100%, 100%)
. This is one of many ways to specify the color white.color
parameter is set to black
.There are many situations in which your website may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using "color"
as the value of its {{htmlattrxref("type", "input")}} attribute.
The <input>
element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.
Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.
- -{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}
- -Note: On macOS, you indicate that you've finalized selection of the color by closing the color picker window.
-The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.
- -<div id="box"> - <label for="colorPicker">Border color:</label> - <input type="color" value="#8888ff" id="colorPicker"> - <p id="output"></p> -</div>- -
The CSS establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...
- -#box { - width: 500px; - height: 200px; - border: 2px solid rgb(245, 220, 225); - padding: 4px 6px; - font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif" -}- -
The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <input type="color">
element.
let colorPicker = document.getElementById("colorPicker"); -let box = document.getElementById("box"); -let output = document.getElementById("output"); - -box.style.borderColor = colorPicker.value; - -colorPicker.addEventListener("input", function(event) { - box.style.borderColor = event.target.value; -}, false); - -colorPicker.addEventListener("change", function(event) { - output.innerText = "Color set to " + colorPicker.value + "."; -}, false);- -
The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.
- -The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <p>
element with the ID "output"
to a string describing the finally selected color.
Making the right choices when selecting colors when designing a website can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people with certain vision problems, particularly color blindness.
- -Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.
- -The first step is to choose your base color. This is the color that in some way defines your website or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:
- -When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the website ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.
- -Note: The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.
-Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.
- -A few examples (all free to use as of the time this list was last revised):
- - - -When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.
- -Note: Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.
-A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:
- -There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a website or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.
- -You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.
- -Note: The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.
-For more information about color blindness, see the following articles:
- -Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a website for a new game that takes place on the planet Mars. So let's do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.
- -Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A
, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.
Having selected our base color, we need to build out our palette. We decide to use Paletton to come up with the other colors we need. Upon opening Paletton, we see:
- - - -Next, we enter our color's hex code (D79C7A
) into the "Base RGB" box at the bottom-left corner of the tool:
We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C
.
If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:
- - - -That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's #556E8D
. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:
Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.
- -Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.
- -What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents.
- -If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS {{cssxref("color-adjust")}} property to tell the browser that it should not make adjustments to the appearance of content.
- -The default value of color-adjust
, economy
, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto.
You can set color-adjust
to exact
to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS.
Note: There is no guarantee, though, that color-adjust: exact
will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of color-adjust
.
Color in HSL notation | +Example | +
---|---|
hsl(90deg, 100%, 50%) |
+ + |
hsl(90, 100%, 50%) |
+ + |
hsl(0.15turn, 50%, 75%) |
+ + |
hsl(0.15turn, 90%, 75%) |
+ + |
hsl(0.15turn, 90%, 50%) |
+ + |
hsl(270deg, 90%, 50%) |
+ + |
+ This is the first box. +
++ This is the second box. +
+` element with the ID `"output"` to a string describing the finally selected color. + +## Using color wisely + +Making the right choices when selecting colors when designing a website can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people with certain vision problems, particularly color blindness. + +### Finding the right colors + +Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started. + +#### Base color + +The first step is to choose your **base color**. This is the color that in some way defines your website or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include: + +* A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey. +* A color that comes from imagery associated with what your content is about. If you're creating a website about a given item or product, choose a color that's physically present on that item. +* Browse websites that let you look at lots of existing color palettes and images to find inspiration. + +When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the website [ColorZilla](http://www.colorzilla.com/) offers an extension ([Chrome](http://www.colorzilla.com/chrome) / [Firefox](http://www.colorzilla.com/firefox)) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page. + +> **Note:** The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place. + +#### Fleshing out the palette + +Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters. + +A few examples (all free to use as of the time this list was last revised): + +* [MDN's color picker tool](/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool) +* [Paletton](http://paletton.com) +* [Adobe Color CC online color wheel](https://color.adobe.com/create/color-wheel) + +When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray. + +> **Note:** Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact. + +### Color theory resources + +A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory: + +* [Color Science](https://www.khanacademy.org/partner-content/pixar/color) ([Khan Academy](https://www.khanacademy.org/) in association with [Pixar](https://www.pixar.com/)) + * : An online course which introduces concepts such as what color is, how it's perceived, and how to use colors to express ideas. Presented by Pixar artists and designers. +* {{interwiki("wikipedia", "Color theory")}} on Wikipedia + * : Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color selection process, but is still full of useful information. + +### Color and accessibility + +There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a website or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully. + +You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all. + +> **Note:** The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening. + +For more information about color blindness, see the following articles: + +* [Medline Plus: Color Blindness](https://medlineplus.gov/colorblindness.html) (United States National Institute of Health) +* [American Academy of Ophthalmology: What Is Color Blindness?](https://www.aao.org/eye-health/diseases/what-is-color-blindness) +* [Color Blindness & Web Design](https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html) (Usability.gov: United States Department of Health and Human Services) + +### Palette design example + +Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a website for a new game that takes place on the planet Mars. So let's do a [Google search for photos of Mars](https://www.google.com/search?q=Mars\&tbm=isch). Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose. + +Using an eyedropper tool, we identify a color we like and determine that the color in question is `#D79C7A`, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface. + +Having selected our base color, we need to build out our palette. We decide to use [Paletton](http://www.paletton.com/) to come up with the other colors we need. Upon opening Paletton, we see: + +![Right after loading Paletton.](paletton1.png) + +Next, we enter our color's hex code (`D79C7A`) into the "Base RGB" box at the bottom-left corner of the tool: + +![After entering base color](paletton2.png) + +We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is `#508D7C`. + +![Now with complementary colors included.](paletton3.png) + +If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following: + +![Triad color scheme selected](paletton4.png) + +That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's `#556E8D`. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site: + +![Triad color scheme selected](paletton-color-detail.png) + +Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them. + +Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at. + +### Color, backgrounds, contrast, and printing + +What looks good on screen may look very different on paper. In addition, ink can be expensive, and if a user is printing your page, they don't necessarily need all the backgrounds and such using up their precious ink when all that matters is the text itself. Most browsers, by default, remove background images when printing documents. + +If your background colors and images have been selected carefully and/or are crucial to the usefulness of the content, you can use the CSS {{cssxref("color-adjust")}} property to tell the browser that it should not make adjustments to the appearance of content. + +The default value of `color-adjust`, `economy`, indicates that the browser is allowed to make appearance changes as it deems necessary in order to try to optimize the legibility and/or print economy of the content, given the type of output device the document is being drawn onto. + +You can set `color-adjust` to `exact` to tell the browser that the element or elements on which you use it have been designed specifically to best work with the colors and images left as they are. With this set, the browser won't tamper with the appearance of the element, and will draw it as indicated by your CSS. + +> **Note:** There is no guarantee, though, that `color-adjust: exact` will result in your CSS being used exactly as given. If the browser provides user preferences to change the output (such as a "don't print backgrounds" checkbox in a print dialog box), that overrides the value of `color-adjust`. + +## See also + +* [Drawing graphics](/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) +* [Graphics on the web](/en-US/docs/Web/Guide/Graphics) +* [MDN's color picker tool](/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool) diff --git a/files/en-us/web/html/attributes/accept/index.html b/files/en-us/web/html/attributes/accept/index.html deleted file mode 100644 index 82c51a319fd4b9c..000000000000000 --- a/files/en-us/web/html/attributes/accept/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: 'HTML attribute: accept' -slug: Web/HTML/Attributes/accept -tags: - - Accept - - Attribute - - File - - HTML - - Input - - Reference ---- -
{{HTMLSidebar}}
- -The accept
attribute takes as its value a comma-separated list of one or more file types, or {{anch("Unique file type specifiers", "unique file type specifiers")}}, describing which file types to allow.
The accept property is an attribute of the {{HTMLElement("input/file", "file")}} {{htmlelement("input")}} type. It was supported on the {{htmlelement("form")}} element, but was removed in favor of {{HTMLElement("input/file", "file")}} in HTML5.
- -Because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of specific type, or use the wild card to denote a type of any format is acceptable.
- -For instance, there are a number of ways Microsoft Word files can be identified, so a site that accepts Word files might use an <input>
like this:
<input type="file" id="docpicker" - accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">- -
Whereas if you're accepting a media file, you may want to be include any format of that media type:
- -<input type="file" id="soundFile" accept="audio/*"> -<input type="file" id="videoFile" accept="video/*"> -<input type="file" id="imageFile" accept="image/*">- -
The accept
attribute doesn't validate the types of the selected files; it provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.
Because of this, you should make sure that expected requirement is validated server-side.
- -When set on a file input type, the native file picker that opens up should only enable selecting files of the correct file type. Most operating systems lighten the files that don't match the criteria and aren't selectable.
- -<p> - <label for="soundFile">Select an audio file:</label> - <input type="file" id="soundFile" accept="audio/*"> -</p> -<p> - <label for="videoFile">Select a video file:</label> - <input type="file" id="videoFile" accept="video/*"> -</p> -<p> - <label for="imageFile">Select some images:</label> - <input type="file" id="imageFile" accept="image/*" multiple> -</p>- -
{{EmbedLiveSample('Examples', '100%', 200)}}
- -Note the last example allows you to select multiple images. See the multiple
attribute for more information.
A unique file type specifier is a string that describes a type of file that may be selected by the user in an {{HTMLElement("input")}} element of type file
. Each unique file type specifier may take one of the following forms:
.jpg
, .pdf
, or .doc
.audio/*
meaning "any audio file".video/*
meaning "any video file".image/*
meaning "any image file".The accept
attribute takes as its value a string containing one or more of these unique file type specifiers, separated by commas. For example, a file picker that needs content that can be presented as an image, including both standard image formats and PDF files, might look like this:
<input type="file" accept="image/*,.pdf">- -
<form method="post" enctype="multipart/form-data"> - <div> - <label for="file">Choose file to upload</label> - <input type="file" id="file" name="file" multiple> - </div> - <div> - <button>Submit</button> - </div> -</form>- - - -
This produces the following output:
- -{{EmbedLiveSample('A_basic_example', 650, 60)}}
- -Note: You can find this example on GitHub too — see the source code, and also see it running live.
-Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.
- -Including the multiple
attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down Shift or Control, and then clicking). If you only want the user to choose a single file per <input>
, omit the multiple
attribute.
Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as {{Glossary("JPEG")}} or {{Glossary("PNG")}}.
- -Acceptable file types can be specified with the {{htmlattrxref("accept","input/file")}} attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:
- -accept="image/png"
or accept=".png"
— Accepts PNG files.accept="image/png, image/jpeg"
or accept=".png, .jpg, .jpeg"
— Accept PNG or JPEG files.accept="image/*"
— Accept any file with an image/*
MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
— accept anything that smells like an MS Word document.Let's look at a more complete example:
- -<form method="post" enctype="multipart/form-data"> - <div> - <label for="profile_pic">Choose file to upload</label> - <input type="file" id="profile_pic" name="profile_pic" - accept=".jpg, .jpeg, .png"> - </div> - <div> - <button>Submit</button> - </div> -</form>- - - -
{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}}
- -Specification | -Status | -
---|---|
{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}} | -{{Spec2('HTML WHATWG')}} | -
{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}} | -{{Spec2('HTML5.1')}} | -
{{Compat("html.elements.attribute.accept")}}
- -+ + +
++ + +
++ + +
+``` + +{{EmbedLiveSample('Examples', '100%', 200)}} + +Note the last example allows you to select multiple images. See the [`multiple`](multiple) attribute for more information. + +## Unique file type specifiers + +A **unique file type specifier** is a string that describes a type of file that may be selected by the user in an {{HTMLElement("input")}} element of type `file`. Each unique file type specifier may take one of the following forms: + +* A valid case-insensitive filename extension, starting with a period (".") character. For example: `.jpg`, `.pdf`, or `.doc`. +* A valid MIME type string, with no extensions. +* The string `audio/*` meaning "any audio file". +* The string `video/*` meaning "any video file". +* The string `image/*` meaning "any image file". + +The `accept` attribute takes as its value a string containing one or more of these unique file type specifiers, separated by commas. For example, a file picker that needs content that can be presented as an image, including both standard image formats and PDF files, might look like this: + +```html + +``` + +## Using file inputs + +### A basic example + +```html + +``` + +```css hidden +div { + margin-bottom: 10px; +} +``` + +This produces the following output: + +{{EmbedLiveSample('A_basic_example', 650, 60)}} + +> **Note:** You can find this example on GitHub too — see the [source code](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html), and also [see it running live](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html). + +Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file. + +Including the [`multiple`](multiple) attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down Shift or Control, and then clicking). If you only want the user to choose a single file per ``, omit the `multiple` attribute. + +### Limiting accepted file types + +Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as {{Glossary("JPEG")}} or {{Glossary("PNG")}}. + +Acceptable file types can be specified with the {{htmlattrxref("accept","input/file")}} attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples: + +* `accept="image/png"` or `accept=".png"` — Accepts PNG files. +* `accept="image/png, image/jpeg"` or `accept=".png, .jpg, .jpeg"` — Accept PNG or JPEG files. +* `accept="image/*"` — Accept any file with an `image/*` MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.) +* `accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` — accept anything that smells like an MS Word document. + +Let's look at a more complete example: + +```html + +``` + +```css hidden +div { + margin-bottom: 10px; +} +``` + +{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}} + +## Specifications + +| Specification | Status | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | +| {{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}} | {{Spec2('HTML WHATWG')}} | +| {{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}} | {{Spec2('HTML5.1')}} | + +## Browser compatibility + +{{Compat("html.elements.attribute.accept")}} + +## See also + +* [Using files from web applications](/en-US/docs/Web/API/File/Using_files_from_web_applications) +* [File API](/en-US/docs/Web/API/File) diff --git a/files/en-us/web/html/attributes/autocomplete/index.html b/files/en-us/web/html/attributes/autocomplete/index.html deleted file mode 100644 index da6edabce7a13fd..000000000000000 --- a/files/en-us/web/html/attributes/autocomplete/index.html +++ /dev/null @@ -1,267 +0,0 @@ ---- -title: The HTML autocomplete attribute -slug: Web/HTML/Attributes/autocomplete -tags: - - Addresses - - Attribute - - Email addresses - - Forms - - HTML - - Input - - Phone Numbers - - Reference - - Select - - Text - - Usernames - - autocomplete - - form - - passwords - - textarea ---- -The HTML autocomplete
attribute lets web developers specify what if any permission the {{Glossary("user agent")}} has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.
It is available on {{HTMLElement("input")}} elements that take a text or numeric value as input, {{HTMLElement("textarea")}} elements, {{HTMLElement("select")}} elements, and {{HTMLElement("form")}} elements.
- -The source of the suggested values is generally up to the browser; typically values come from past values entered by the user, but they may also come from pre-configured values. For instance, a browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes. Perhaps the browser offers the ability to save encrypted credit card information, for autocompletion following an authentication procedure.
- -If an {{HTMLElement("input")}}, {{HTMLElement("select")}} or {{HTMLElement("textarea")}} element has no autocomplete
attribute, then browsers use the autocomplete
attribute of the element's form owner, which is either the {{HTMLElement("form")}} element that the element is a descendant of, or the <form>
whose id
is specified by the {{htmlattrxref("form", "input")}} attribute of the element.
For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.
- -Note: In order to provide autocompletion, user-agents might require <input>
/<select>
/<textarea>
elements to:
name
and/or id
attribute<form>
elementoff
"Note: In most modern browsers, setting autocomplete
to "off
" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.
on
"name
"name
" rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the following autocomplete
values if you do need to break the name down into its components:
- honorific-prefix
"given-name
"additional-name
"family-name
"honorific-suffix
"nickname
"email
"username
"new-password
"current-password
"one-time-code
"organization-title
"organization
"street-address
"address-line1
", "address-line2
", "address-line3
"street-address
" is not present.address-level4
"address-level3
"address-level2
"address-level1
"country
"country-name
"postal-code
"cc-name
"cc-given-name
"cc-additional-name
"cc-family-name
"cc-number
"cc-exp
"cc-exp-month
"cc-exp-year
"cc-csc
"cc-type
"transaction-currency
"transaction-amount
"transaction-currency
", of the transaction, for a payment form.language
"bday
"bday-day
"bday-month
"bday-year
"sex
"tel
"tel-country-code
"tel-national
"tel-area-code
"tel-local
"tel-local-prefix
" for "555" and "tel-local-suffix
" for "6502".tel-extension
"impp
"url
"photo
"See the WHATWG Standard for more detailed information.
- -Note: The autocomplete
attribute also controls whether Firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input>
element, <textarea>
element, or entire <form>
across page loads. The persistence feature is enabled by default. Setting the value of the autocomplete
attribute to off
disables this feature. This works even when the autocomplete
attribute would normally not apply by virtue of its type
. See {{bug(654072)}}.
<div> - <label for="cc-number">Enter your credit card number</label> - <input name="cc-number" id="cc-number" autocomplete="off"> -</div>- -
The four administrative level fields (address-level1
through address-level4
) describe the address in terms of increasing levels of precision within the country in which the address is located. Each country has its own system of administrative levels, and may arrange the levels in different orders when addresses are written.
address-level1
always represents the broadest administrative division; it is the least-specific portion of the address short of the country name.
Given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields entirely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.
- -The way each administrative level is used will vary from country to country. Below are some examples; this is not meant to be an exhaustive list.
- -A typical home address within the United States looks like this:
- -432 Anywhere St
-Exampleville CA 95555
In the United States, the least-specific portion of the address is the state, in this case "CA" (the official US Postal Service shorthand for "California"). Thus address-level1
is the state, or "CA" in this case.
The second-least specific portion of the address is the city or town name, so address-level2
is "Exampleville" in this example address.
United States addresses do not use levels 3 and up.
- -Address input forms in the UK should contain one address level and one, two or three address lines, depending on the address. A complete address would look like so:
- -103 Frogmarch Street
-Upper-Wapping
-Winchelsea
-TN99 8ZZ
The address levels are:
- -address-level1
: The post town — "Winchelsea" in this case.address-line2
: The locality — "Upper-Wapping" in this case.address-line1
: The house/street particulars — "103 Frogmarch Street"The postcode is separate. Note that you can actually use just the postcode and address-line1
to successfully deliver mail in the UK, so they should be the only mandatory items, but usually people tend to provide more details.
China can use as many as three administrative levels: the province, the city, and the district.
- -The 6 digit postal code is not always needed but when supplied it is placed separately with a label for clarity. For example:
- -北京市东城区建国门北大街8号华润大厦17层1708单元
-邮编:100005
An address in Japan is typically written in one line, in an order from the least-specific to more-specific portions (in reverse order to the United States). There are two or three administrative levels in an address. Additional line can be used to show building names and room numbers. The postal code is separate. For example:
- -〒381-0000
-長野県長野市某町123
"〒" and following seven digits shows the postal code.
- -address-level1
is used for prefectures or the Tokyo Metropolis; "長野県" (Nagano Prefecture) is in this case. address-level2
is typically used for cities, counties, towns and villages; "長野市" (Nagano City) in this case. "某町123" is address-line1
which consists of an area name and a lot number.
Specification | -
---|
{{SpecName('HTML WHATWG', "#attr-fe-autocomplete", "autocomplete")}} | -
{{Compat("html.global_attributes.autocomplete")}}
- -