color

Color Is a Mathematical Nightmare

Color representation involves complex mathematical models called color spaces that define how colors are perceived and displayed. Different models (CMYK, RGB, HSL) serve various purposes across digital and physical media, leading to confusion about which to use for specific tasks. Color spaces optimize color accuracy for applications like web design, photography, and printing. The concept of gamut measures the range of colors a device can display, which varies by technology. While understanding color models can aid in making informed choices for devices, most users can rely on software to handle complexity and appreciate the beauty of color in everyday life.

https://www.theverge.com/tech/643638/color-models-spaces-gamut-mathematical-nightmare

Animated CSS Gradient Text

, ,

Animated CSS gradient text utilizing CSS properties (e.g., @property, linear-gradient, background-clip, text-fill-color) with animations defined by keyframes and custom colors. The setup includes browser compatibility for text background clipping and vibrant gradients using modern color spaces. Basic HTML and CSS structure provided.

https://codepen.io/argyleink/pen/vEBmZNw

CSS Relative Colors

,

CSS Relative Colors is an innovative method for dynamically adjusting colors in CSS without relying on pre-processors like Sass. The article discusses problems with traditional color use, such as modifying opacity or creating lighter/darker variations through absolute values. It introduces a new syntax for relative colors, allowing adjustments based on another color's values and provides practical examples, such as button borders, gradients, and shadows. The article emphasizes the advantages of using relative colors over traditional methods, highlighting their ability to maintain consistent contrast ratios and improve accessibility. Overall, CSS relative colors offer a modern solution for flexible and efficient color management in web design.

https://ishadeed.com/article/css-relative-colors/

Color Contrast Accessibility Requirements Explained

,

Color contrast is the difference in brightness between two colors and is crucial for accessibility. It ensures that text and graphics are legible for everyone, particularly those with color blindness or low vision. There are specific contrast ratio requirements: text smaller than 18pt/14pt bold must have a ratio of at least 4.5:1, while larger text needs 3:1. Non-text elements and user interface components should also meet a minimum of 3:1 contrast with adjacent colors. Links that aren't underlined must have a 3:1 ratio with body text and 4.5:1 with the background. To enhance accessibility, use contrast tools and incorporate these guidelines into design practices.

https://blog.pope.tech/2022/11/08/color-contrast-accessibility-requirements-explained/

The Natural System of Colours

Moses Harris' 1766 work, The Natural System of Colours, introduces color theory with three primary colors (red, blue, yellow) from which all hues derive. It includes two significant color wheels: a “Prismatic” wheel and a “Compound” wheel. Harris aimed to aid artists in color mixing, showcasing relationships among colors despite some modern refinements. The project recreates these wheels digitally and explores their behavior on dark paper. Collectively, they represent a blend of historical and contemporary color theory, available as posters and with a public color data spreadsheet.

https://www.c82.net/natural-colors/

OKLCH in CSS: Why We Moved From RGB and HSL—Martian Chronicles, Evil Martians’ Team Blog

,

TLDR: oklch() is a new CSS color format, improving over RGB and HSL by offering better perceptual lightness, chroma and hue definitions for colors, enabling automatic palette generation and supporting wide-gamut P3 colors. It offers enhanced readability, predictable lightness for color modifications, and greater accessibility. While OKLCH is young and faces ecosystem limitations, it outperforms HSL and RGB in accuracy and usability for modern design.

https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

OKLCH Color Picker & Converter

,

OKLCH Color Picker & Converter converts colors between formats like HEX, RGB, and HSL to OKLCH. It includes sRGB and P3 spaces, and provides various color metrics like lightness, chroma, and hue. Made by Evil Martians, it offers 3D models and tools for color visualization and integration with Figma.

https://oklch.com/

Scroll to Top