Lädt...


🔧 Coloring Your Web World: A Guide to CSS Colors


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

Color is a form of electromagnetic radiation that is visible to the human eye. It is the way we perceive and experience different wavelengths of light. Colors can evoke emotions, convey meanings, and add depth and complexity to our experiences.
Color plays a significant role in many aspects of our day-to-day life. It helps to convey messages, express identity, influence mood, stimulate appetite, influence fashion trends, enhance artistic expression, etc.
For web developers, colors help to enhance user experiences, affect legibility, create appealing effects and aesthetics, indicate interactive elements, and evoke emotions. Web developers and designers must be very careful in choosing colors for their projects as it significantly affects how users interact with the page. Other reasons why developers must pay attention include;

  1. Accessibility: some users may have visual impairment or color blindness. The colors should be used in such a way that there is enough contrast between the background and text. Also, different modes like light and dark modes or different color themes could be made available for the sake of users with color sensitivity.
  2. Brand identity: colors are usually used to represent brand identity. When building for an organization, it is important to reflect the colors of the organization’s brand for consistency, and for reinforcing the brand's identity and recognition.
  3. Also, take note of the cultural implications of colors and how to use colors to evoke the desired emotions.
  4. Colors can also determine if the website/app will be visually appealing or repulsive to the users. It is important to ensure that beauty and aesthetics are taken into consideration.
  5. Colors can also be used to direct the users on how to interact with the websites. Call-to-action buttons are usually made to stand out. Also, color red is usually used to warn users against deleting important data.

how to indicate colors in CSS

There are several color systems available in CSS. However, in this course, we shall discuss;
• Color keywords
• Hex color
• Hexa colors
• Rgb()
• Rgba()
• Hsl()
• Hsla()

Color keywords

One way of representing colors in CSS is obviously by their known names. Names like red, purple, green, blue, etc. are easily identifiable. There are also variations of those colors, like darkblue, cornflowerblue, darkgreen, darkorange, darkcyan, slateblue, slategrey, seagreen, hotpink etc.
Besides the fact that not all colors and shades have names, it is also a lot of work to memorize the colors by their various names. You may also know the name of the color you intend to use, but that name may not be a valid CSS color keyword or may look slightly different in CSS from what you know the color to look like.
Besides that, color keywords are only available for just 147 colors. Whereas, the human eye is said to see and distinguish approximately between 1 million to 1.5 million colors. And arguments are disputing this figure with claims that the eyes can see way more than that.
Also, the color keywords do not have alpha support, thereby making it difficult to add transparency to the colors.
In other to limit some of these challenges, CSS allows us to create colors, or mix colors with a couple of color systems. Some of them require mixing colors; others involve manipulating the lightness, transparency, and saturation of existing colors and hues.

Hexadecimal (hex) colors

The hexadecimal color system allows for a lot more flexibility with creating colors, and gives a lot more options to the designers/developers with colors to choose from. With the hex system, colors are created by mixing red, blue, and green.
The hexadecimal system starts with the # symbol and then followed by six digits. These digits range from 0-f. So, rather than have the numbers like
0 1 2 3 4 5 6 7 8 9,
as in decimal numbers, making up ten,
We have numbers

0 1 2 3 4 5 6 7 8 9 a b c d e f
Making up 16.

So to combine a hex color, you’ll have;

Image description
In decimal notation, each of these values corresponds to an integer between 00 and FF, or 0 and 255. The hexadecimal notation allows for the representation of 256 ^ 3 or 16,777,216 colors in total. Black represents the absence of all three colors; while white represents the full capacity of all three colors. To get various shades of grey, have all three colors in equal proportions.

Image description
You can also have as many shades of the same colors as you can imagine. A couple of blue shades for example.

Image description
We can make thousands of shades from blue alone, by ensuring that the value for blue is higher than that of red and green. You can also do the same with red and green. In most cases, a color picker will help with choosing colors.
Applying transparency
You can apply transparency to hexadecimal by adding an extra alpha value to the hex color. The closer the number is to zero, the higher the transparency while a higher number will be more opaque. For example,

(#000d or #fefe56dd will add a little transparency to the colors, and a color of say #0004 0r #fefe5644 will be much more transparent.)
Image description

Rgb() colors

rgb() colors are quite similar to the hexadecimal color system. They both represent a mixture of red, blue, and green with 255 possible values for each color. The difference here however is the syntax. The rgb() colors use decimal numbers of 0-255, separated by comma to represent each color.
Syntax;
rgb(red, green, blue);

Image description

Rgba()

Rgba() gives the opportunity to add opacity/transparency to the colors. The extra a there is called the alpha value and is a number between 0 and 1. The closer the number is to zero, the more transparent the color will be.

Hsl() colors

Hsl stand for
Hue: specifies the color. Represented by the degree along the color wheel. 0° is red,

Image description
Saturation: indicating the level of vividness of the color. 0 will give a gray color, whereas 100% will give the most vivid version of the color.
Lightness: in percentage indicating how light or dark the color would be;
Illustration
The image below illustrates the HSL hue. The saturation has been set to 100%, and lightness 50% for all cases.

Image description
2.
Now let’s take a hue of 0deg, and 50% lightness and see how different saturations look like

Image description
Now, let’s maintain the hue of 0deg, and saturation of 100% and see how the lightness plays out.

Image description

Conclusion

This text provides a comprehensive overview of colors in web development, including their importance, cultural implications, and how to represent them in CSS using various color systems.
Here is a summary of the color systems mentioned:
• Color Keywords: 147 predefined color names, e.g. "red", "blue", and "green".
• Hexadecimal (Hex): Six-digit code starting with #, e.g. #FF0000 for red.
• RGB: Decimal values for red, green, and blue, e.g. rgb(255, 0, 0) for red.
• RGBA: Adds alpha value for transparency, e.g. rgba(255, 0, 0, 0.5) for semi-transparent red.
• HSL: Hue, saturation, and lightness values, e.g. hsl(0, 100%, 50%) for red.
• HSLA: Adds alpha value for transparency, e.g. hsla(0, 100%, 50%, 0.5) for semi-transparent red.
The text also provides examples and illustrations to help understand how to work with colors in CSS.

...

🔧 Coloring Your Web World: A Guide to CSS Colors


📈 65.24 Punkte
🔧 Programmierung

🔧 Introduction of CSS, What is CSS, Why we use CSS and How CSS describe the HTML elements


📈 32.65 Punkte
🔧 Programmierung

🔧 Understanding CSS Background Coloring for Nested Elements


📈 32.57 Punkte
🔧 Programmierung

🔧 Easily Choose Your Route with Bing Maps Traffic Coloring


📈 27.66 Punkte
🔧 Programmierung

🔧 Accessibility Colors: Your One-Stop Guide for Web Design


📈 27.06 Punkte
🔧 Programmierung

🔧 A deep dive into the CSS color-mix() function and future of colors on the web.


📈 26.48 Punkte
🔧 Programmierung

🔧 Choosing the Right CSS Approach: Tailwind CSS vs Bootstrap vs Vanilla CSS


📈 24.49 Punkte
🔧 Programmierung

🔧 A BRIEF REVIEW OF CSS CASCADING, CSS SELECTORS and CSS SPECIFICITY.


📈 24.49 Punkte
🔧 Programmierung

🔧 Stylify CSS: Automagic CSS bundles splitting into CSS layers in Astro.build


📈 24.49 Punkte
🔧 Programmierung

🔧 CSS Grid: Moving From CSS Frameworks To CSS Grid (2018 and beyond)


📈 24.49 Punkte
🔧 Programmierung

🐧 Coloring a black and white video on Linux with Open Source Software?


📈 24.4 Punkte
🐧 Linux Tipps

📰 A 53-Year-Old Network Coloring Conjecture Is Disproved


📈 24.4 Punkte
📰 IT Security Nachrichten

📰 Calibre 2.73 eBook Manager Allows Import and Export of Column Coloring Rules


📈 24.4 Punkte
📰 IT Security

📰 Fotoxx 16.08 Free Image Editor Improves Sepia Coloring, Adds New Functions


📈 24.4 Punkte
📰 IT Security

📰 Calibre 2.73 eBook Manager Allows Import and Export of Column Coloring Rules


📈 24.4 Punkte
📰 IT Security

🔧 SAPUI5 - Table Cell Coloring


📈 24.4 Punkte
🔧 Programmierung

📰 Fotoxx 16.08 Free Image Editor Improves Sepia Coloring, Adds New Functions


📈 24.4 Punkte
📰 IT Security

🔧 Graph Coloring Problem: Cracking Complexity with Elegant Solutions


📈 24.4 Punkte
🔧 Programmierung

🔧 Coloring Canvass Generator!


📈 24.4 Punkte
🔧 Programmierung

🔧 Coloring console text easily with Terminaux


📈 24.4 Punkte
🔧 Programmierung

📰 Friday Squid Blogging: Underwater Sculptures Use Squid Ink for Coloring


📈 24.4 Punkte
📰 IT Security Nachrichten

🪟 Best AI Generator for Coloring Pages: 10 Awesome Tools


📈 24.4 Punkte
🪟 Windows Tipps

📰 The Graph Coloring Problem: Exact and Heuristic Solutions


📈 24.4 Punkte
🔧 AI Nachrichten

🍏 ColoFolXS 2.2.1 - Compact icon tool for coloring folders.


📈 24.4 Punkte
🍏 iOS / Mac OS

🍏 Patterns 1.3 - Build patterns quickly and effortlessly with syntax coloring.


📈 24.4 Punkte
🍏 iOS / Mac OS

💾 Kea Coloring Book


📈 24.4 Punkte
💾 Downloads

🐧 A Coloring API for GTK


📈 24.4 Punkte
🐧 Linux Tipps

🔧 Tailwindcss is My Favorite Coloring Book


📈 24.4 Punkte
🔧 Programmierung

🔧 Tailwind CSS vs. Vanilla CSS: When to Use Each for Your Web Development Projects


📈 23.37 Punkte
🔧 Programmierung

🔧 Bootstrap vs. Tailwind CSS: Which CSS Framework is Best for Your Web Development Project?


📈 23.37 Punkte
🔧 Programmierung

🔧 How to mix colors in css?


📈 22.69 Punkte
🔧 Programmierung

🔧 Tailwind CSS: Customizing Colors and Fonts


📈 22.69 Punkte
🔧 Programmierung

🔧 Tailwind CSS: Customizing Colors and Fonts


📈 22.69 Punkte
🔧 Programmierung

🔧 Colors and Backgrounds in CSS


📈 22.69 Punkte
🔧 Programmierung

matomo