# color Color is the perceptual attribute of visual experience produced by light interacting with photoreceptors and processed by the visual cortex; its numerical specification supports display engineering, digital imaging, visual computing, and computer graphics. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Hisense E7SF combines MiniLED, 144Hz, and Fire TV in a six-size TV range DevFeed: [Hisense E7SF combines MiniLED, 144Hz, and Fire TV in a six-size TV range]() Original publisher: [Read original article]() Author: Sarang Sheth Published: 2026-09-17T01:45:25Z Content type: article Language: en Sources: [Yanko Design]() Topics: [screen](), [color](), [Artificial Intelligence]() Tags: [ai](), [color](), [deals](), [deals-product-design-technology-television-ai-hisense-shop](), [hisense](), [product-design](), [screen](), [shop](), [technology](), [television]() ### AI overview The Hisense E7SF is a MiniLED TV with a native 144Hz panel, Hi-QLED color, up to 260 local dimming zones, Fire TV, and Alexa+. It is offered in sizes from 50 to 100 inches, with support for major HDR formats and AI Picture processing. ### Source excerpt Hisense E7SF packs MiniLED, 144Hz, and Fire TV into a seriously affordable big-screen TV There used to be two ways to buy a TV. Go cheap and squint through a mediocre picture, or spend enough that your banking app... ## TRA:CE is a portable scanner concept for recording color, material, and surface finish DevFeed: [TRA:CE is a portable scanner concept for recording color, material, and surface finish]() Original publisher: [Read original article]() Author: JC Torres Published: 2026-09-16T13:20:57Z Content type: article Language: en Sources: [Yanko Design]() Topics: [color](), [Tool](), [dataset](), [App]() Tags: [capture](), [cmf](), [color](), [concept-designs](), [design](), [gadgets](), [gadgets-product-design-technology-cmf-concept-designs-scanner](), [product-design](), [scanner](), [technology]() ### AI overview The article presents TRA:CE, a pocket-sized CMF scanner concept that reads color, material, texture, and finish directly from surfaces. Scans are saved in a companion app with color values, reference matches, grain, pore size, and gloss information. ### Source excerpt Phone Photos of Materials Lie, This Scanner Reads the Surface Itself Every designer has a folder full of phone photos that were supposed to capture a specific shade of oak or a particular matte finish, and... ## Building a Multi-Theme Design System in Figma DevFeed: [Building a Multi-Theme Design System in Figma]() Original publisher: [Read original article]() Author: Jacqueline Rhoda Published: 2026-07-27T18:53:49Z Content type: tutorial Language: en Sources: [Apartment 304]() Topics: [Design system](), [Figma](), [configuration](), [color]() Tags: [apartment-304](), [color](), [configuration](), [custom-software-solutions](), [design](), [design-system](), [design-systems](), [devops](), [devops-engineer](), [figma](), [software-architecture](), [software-development](), [software-engineer](), [tokens]() ### AI overview This tutorial explains how to build a multi-theme design system in Figma. It describes keeping components, layouts, and patterns consistent while adapting brand identity and visual styles through variables, styles, and semantic color tokens. ### Source excerpt Build flexible Figma design systems that scale across brands and customers. ## Modern CSS theming with light-dark(), contrast-color(), and style queries DevFeed: [Modern CSS theming with light-dark(), contrast-color(), and style queries]() Original publisher: [Read original article]() Published: 2026-06-22T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [modern web development](), [color](), [Media Queries]() Tags: [color](), [css](), [dark-mode](), [dynamic-theming](), [media](), [scheme](), [support](), [themes]() ### AI overview This tutorial explains how to combine light-dark(), contrast-color(), style queries, custom properties, and related CSS color features to create adaptive themed components. It covers light and dark color schemes, context-sensitive palettes, automatic text contrast, and different elevation effects for each theme. ### Source excerpt Combine three new CSS features to build fully adaptive themed components. ## Journey to JPEG XL: How open source experiments shaped the future of image coding DevFeed: [Journey to JPEG XL: How open source experiments shaped the future of image coding]() Original publisher: [Read original article]() Author: Google Open Source (noreply@blogger.com) Published: 2026-06-03T18:30:00Z Content type: article Language: en Sources: [Google Open Source Blog]() Topics: [coding](), [Compression](), [Open Source](), [Optimization](), [color](), [Internet]() Tags: [coding](), [color](), [compression](), [image](), [image-compression](), [internet](), [jpeg](), [jpeg-xl](), [open-source](), [optimization](), [web]() ### AI overview The article traces the development of JPEG XL through earlier open-source experiments, including WebP Lossless, Brotli, Butteraugli, Guetzli, and Brunsli. It explains how work on entropy coding, context modeling, psychovisual metrics, color representation, and JPEG compression informed the newer image format. ### Source excerpt by Jyrki Alakuijala, Zoltán Szabadka & Luca Versari, Paradigms of Intelligence, Google Technology & Society Building the Next Generation Image Standard The internet runs on images. Since the early days of the web, there has been a relentless tension between visual fidelity and bandwidth. For decades, the industry relied on the venerable JPEG standard for images loading fast. It served us remarkably well, but as displays moved to High Dynamic Range (HDR) and Wide Color Gamut (WCG), the format began to show its limits. The road to JPEG XL (JXL) wasn't a straight line. It was a decade-long exploration, creating a series of milestone projects testing radical ideas in psychovisual modeling, entropy coding, and optimization. Today, as JPEG XL sees rapid adoption across operating systems and professional standards, we're looking back at the experiments that made it possible. The Early Foundation: 2011-2017 Our study began with a focus on understanding the limits of existing technology. We didn't start by trying to write a new standard; we started by trying to make the current ones better, and learning their limitations. This allowed us to make the new formalism more flexible and efficient in the right places. WebP Lossless and Brotli: Lossy WebP drew its lineage from video technology, the WebP Lossless (2011) represented an architectural and scoping departure. We debuted the entropy image concept, an innovative method utilizing a secondary image to orchestrate the selection of static entropy codes for the primary visual data. We reapplied this approach later with data-driven context modeling in the Brotli compression format, enabling rich context modeling without slowing decoding. Butteraugli: Around 2014, we realized that raw mathematical compression (PSNR) wasn't enough, and simple psychovisual approximations (SSIM and similar) failed in color-rich environments. We built Butteraugli and the XYB color space to mimic the human visual system's edge detection and opponent-co ## contrast-color() beyond black & white DevFeed: [contrast-color() beyond black & white]() Original publisher: [Read original article]() Published: 2026-03-13T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [color](), [Web platform](), [Web Development]() Tags: [color](), [css](), [demo](), [how-to](), [web-platform]() ### AI overview This tutorial presents two techniques for extending CSS contrast-color() beyond its black-or-white result: tinting a brand color with the returned value, and creating custom color palettes with style queries and custom properties. It emphasizes validating the resulting color combinations with WCAG or APCA contrast checkers. ### Source excerpt Two techniques that bypass the black-or-white limit of contrast-color() for custom color palettes. ## Dynamic Tints with CSS and Kotlin/JS DevFeed: [Dynamic Tints with CSS and Kotlin/JS]() Original publisher: [Read original article]() Author: Jesse Wilson Published: 2026-01-30T23:12:23Z Content type: tutorial Language: en Sources: [Public Object]() Topics: [CSS](), [ui](), [color](), [Kotlin](), [SVG]() Tags: [animate](), [color](), [css](), [kotlin](), [svg](), [ui]() ### AI overview A developer describes adding dynamic color tints to a game-scoring UI using CSS classes, transitions, and Kotlin/JS. The article also explains recoloring single-color SVG icons with CSS masks and dynamically inserted stylesheet rules. ### Source excerpt I've been trying to build a remarkable UI for Rounds.app. One feature that turned out quite well is tinting the game name & menu bar icons when the winner changes. In this recording you can see colors change when I toggle the win condition: The title color changes ## A series of tricks and techniques I learned doing tiny GLSL demos DevFeed: [A series of tricks and techniques I learned doing tiny GLSL demos]() Original publisher: [Read original article]() Published: 2025-12-07T17:48:26Z Content type: tutorial Language: en Sources: [The Last Static Blog RSS]() Topics: [glsl](), [Demo](), [Code](), [iteration](), [color]() Tags: [code](), [demo](), [fun](), [glsl](), [graphics](), [iteration](), [math](), [prog](), [techniques](), [tricks]() ### AI overview This tutorial examines four tiny GLSL demos--Moonlight, Entrance 3, Archipelago, and Cutie--and explains selected techniques learned while creating them. It introduces an alternative raymarching approach using inverse-density color contributions and relates it to photon-density integration. ### Source excerpt In the past two months or so, I spent some time making tiny GLSL demos. I wrote an article about the first one, Red Alp. There, I went into details about the whole process, so I recommend to check it out first if you're not familiar with the field. We will look at 4 demos: Moonlight, Entrance 3, Archipelago, and Cutie. But this time, for each demo, we're going to cover one or two things I learned from it. It won't be a deep dive into every aspect because it would be extremely redundant. Instead, I'll take you along a journey of learning experiences. Moonlight Moonlight demo in 460 characters // Moonlight [460] by bµg // License: CC BY-NC-SA 4.0 void main(){vec3 o,p,u=vec3((P+P-R)/R.y,1),Q;Q++;for(float d,a,m,i,t;i++<1e2;p=t<7.2?Q:vec3(2,1,0),d=abs(d)*.15+.1,o+=p/m+(t>9.?d=9.,Q:p/d),t+=min(m,d))for(p=normalize(u)*t,p.z-=5e1,m=max(length(p)-1e1,.01),p.z+=T,d=5.-length(p.xy*=mat2(cos(t*.2+vec4(0,33,11,0)))),a=.01;a<1.;a+=a)p.xz*=mat2(8,6,-6,8)*.1,d-=abs(dot(sin(p/a*.6-T*.3),p-p+a)),m+=abs(dot(sin(p/a/5.),p-p+a/5.));o/=4e2;O=vec4(tanh(mix(vec3(-35,-15,8),vec3(118,95,60),o-o*length(u.xy*.5))*.01),1);} Note See it on its official page, or play with the code on its Shadertoy portage. In Red Alp, I used volumetric raymarching to go through the clouds and fog, and it took quite a significant part of the code to make the absorption and emission convincing. But there is an alternative technique that is surprisingly simpler. In the raymarching loop, the color contribution at each iteration becomes 1/d or c/d where d is the density of the material at the current ray position, and c an optional color tint if you don't want to work in grayscale level. Some variants exist, for example 1/d^2, but we'll focus on 1/d. 1/d explanation Let's see how it looks in practice with a simple cube raymarch where we use this peculiar contribution: One glowing and rotating cube void main() { float d, t; vec3 o, p, u = normalize(vec3(P+P-R,R.y)); // screen to world coordinate for (int i = 0; i < 30 ## Lookat 2.1.0 released DevFeed: [Lookat 2.1.0 released]() Original publisher: [Read original article]() Author: Staf Wagemakers Published: 2025-09-14T18:04:00Z Content type: release Language: en Sources: [stafwag Blog]() Topics: [Unix](), [color](), [browser](), [changelog]() Tags: [2](), [2025](), [ansi](), [browser](), [bsd](), [changelog](), [color](), [freebsd](), [git](), [linux](), [lookat](), [manpage](), [ncurses](), [netbsd](), [openbsd](), [release](), [unix]() ### AI overview Lookat/Bekijk 2.1.0 is the latest stable release of a Unix file browser and viewer that supports colored man pages. The release adds ANSI color support and includes updates to color handling, documentation, directory organization, and related scripts. ### Source excerpt Lookat 2.1.0 is the latest stable release of Lookat/Bekijk, a user-friendly Unix file browser/viewer that supports colored man pages. The focus of the 2.1.0 release is to add ANSI Color support. News 14 Sep 2025 Lookat 2.1.0 Released Lookat / Bekijk 2.1.0rc2 has been released as Lookat / Bekijk 2.1.0 3 Aug 2025 Lookat 2.1.0rc2 Released Lookat 2.1.0rc2 is the second release candicate of Lookat 2.1.0 ChangeLog Lookat / Bekijk 2.1.0rc2 Corrected italic color Don't reset the search offset when cursor mode is enabled Renamed strsize to charsize ( ansi_strsize -> ansi_charsize, utf8_strsize -> utf8_charsize) to be less confusing Support for multiple ansi streams in ansi_utf8_strlen() Update default color theme to green for this release Update manpages & documentation Reorganized contrib directory Moved ci/cd related file from contrib/* to contrib/cicd Moved debian dir to contrib/dist Moved support script to contrib/scripts ## Basic Web Accessibility Tests: Turn Your Monitor to Grayscale DevFeed: [Basic Web Accessibility Tests: Turn Your Monitor to Grayscale]() Original publisher: [Read original article]() Author: Vince Published: 2025-09-05T16:15:00Z Content type: tutorial Language: en Sources: [Blog-Main]() Topics: [Accessibility](), [Web Accessibility (a11y)](), [Web Content Accessibility Guidelines](), [color](), [digital accessibility](), [Testing]() Tags: [accessibility](), [accessibility-guidelines](), [accessibility-ux](), [color](), [digital-accessibility](), [people-with-disabilities](), [testing](), [tests](), [wcag](), [web](), [web-accessibility](), [web-content-accessibility-guidelines]() ### AI overview This article explains how viewing a website in grayscale can help reveal accessibility problems caused by using color as the only way to convey information. It places the exercise within a broader strategy combining automated and manual testing for WCAG Level AA conformance and gives examples involving links, form fields, charts, and status indicators. ### Source excerpt To truly test content for accessibility, you need an extensive strategy that combines automated testing with manual tests. You should have a goal in mind -- for most websites, that's Level AA conformance with the Web Content Accessibility Guidelines (WCAG). ## Lookat 2.1.0rc2 released DevFeed: [Lookat 2.1.0rc2 released]() Original publisher: [Read original article]() Author: Staf Wagemakers Published: 2025-08-03T09:48:50Z Content type: release Language: en Sources: [stafwag Blog]() Topics: [Unix](), [color](), [changelog](), [Documentation](), [CI/CD]() Tags: [bsd](), [changelog](), [ci-cd](), [color](), [documentation](), [freebsd](), [linux](), [lookat](), [manpage](), [ncurses](), [netbsd](), [openbsd](), [release](), [unix]() ### AI overview Lookat 2.1.0rc2 is the second release candidate for Lookat/Bekijk 2.1.0, a Unix file browser and viewer focused on ANSI color support. The release corrects italic color handling, changes character-size naming, supports multiple ANSI streams, updates the default color theme, revises documentation, and reorganizes contribution directories. ### Source excerpt Lookat 2.1.0rc2 is the second release candicate of release of Lookat/Bekijk 2.1.0, a user-friendly Unix file browser/viewer that supports colored man pages. The focus of the 2.1.0 release is to add ANSI Color support. News 3 Aug 2025 Lookat 2.1.0rc2 Released Lookat 2.1.0rc2 is the second release candicate of Lookat 2.1.0 ChangeLog Lookat / Bekijk 2.1.0rc2 Corrected italic color Don't reset the search offset when cursor mode is enabled Renamed strsize to charsize ( ansi_strsize -> ansi_charsize, utf8_strsize -> utf8_charsize) to be less confusing Support for multiple ansi streams in ansi_utf8_strlen() Update default color theme to green for this release Update manpages & documentation Reorganized contrib directory Moved ci/cd related file from contrib/* to contrib/cicd Moved debian dir to contrib/dist Moved support script to contrib/scripts ## Choosing sRGB, Linear RGB, and OkLab for Color Gradients DevFeed: [Choosing sRGB, Linear RGB, and OkLab for Color Gradients]() Original publisher: [Read original article]() Published: 2025-07-18T20:10:43Z Content type: article Language: en Sources: [The Last Static Blog RSS]() Topics: [glsl](), [color](), [Code]() Tags: [code](), [color](), [glsl](), [graphics](), [math](), [prog](), [technology]() ### AI overview This article examines how sRGB, linear RGB, and OkLab behave when generating color gradients. It explains that sRGB can produce muddy midtones, linear RGB models light energy correctly but may look less perceptually suitable, and OkLab generally provides the best perceptual result at a performance cost. It also notes that monochrome gradients produce different tradeoffs. ### Source excerpt The idea that we must always linearize sRGB gradients or work in a perceptually uniform colorspace is starting to be accepted universally. But is it that simple? When I learned about the subject, it felt like being handed a hammer and using it everywhere. The reality is a bit more nuanced. In this article we will see when to use which, how to use them, and we will then see why the situation is more dire than it looks. Code snippets Before we start, since we are going to use GLSL as language, following are the reference functions we will use for the rest of the article. vec3 s2l(vec3 c) { // sRGB to linear return mix(c/12.92, pow((max(c,0.0)+0.055)/1.055,vec3(2.4)), step(vec3(0.04045),c)); } vec3 l2s(vec3 c) { // linear to sRGB return mix(c*12.92, 1.055*pow(max(c,0.0),vec3(1./2.4))-0.055, step(vec3(0.0031308),c)); } vec3 l2oklab(vec3 rgb) { // linear to OkLab const mat3 rgb2lms = mat3( +0.4122214708, +0.2119034982, +0.0883024619, +0.5363325363, +0.6806995451, +0.2817188376, +0.0514459929, +0.1073969566, +0.6299787005); const mat3 lms2lab = mat3( +0.2104542553, +1.9779984951, +0.0259040371, +0.7936177850, -2.4285922050, +0.7827717662, -0.0040720468, +0.4505937099, -0.8086757660); vec3 lms = rgb2lms * rgb; return lms2lab * pow(lms, vec3(1.0/3.0)); } vec3 oklab2l(vec3 lab) { // OkLab to linear const mat3 lab2lms = mat3( +1.0000000000, +1.0000000000, +1.0000000000, +0.3963377774, -0.1055613458, -0.0894841775, +0.2158037573, -0.0638541728, -1.2914855480); const mat3 lms2rgb = mat3( +4.0767416621, -1.2684380046, -0.0041960863, -3.3077115913, +2.6097574011, -0.7034186147, +0.2309699292, -0.3413193965, +1.7076147010); vec3 lms = lab2lms * lab; return lms2rgb * (lms*lms*lms); } Also, the output of the pipeline will be expected to be sRGB all the time. Color gradients To illustrate how sRGB, linear RGB and OkLab respectively look like, let's interpolate between two colors with each one of them: Color gradients from top to bottom: sRGB, linear, OkLab The 3 stripes were generate ## Lookat 2.1.0rc1 released DevFeed: [Lookat 2.1.0rc1 released]() Original publisher: [Read original article]() Author: Staf Wagemakers Published: 2025-06-08T09:48:50Z Content type: release Language: en Sources: [stafwag Blog]() Topics: [browser](), [color](), [Unix](), [file](), [Development](), [changelog]() Tags: [2025](), [browser](), [bsd](), [changelog](), [color](), [development](), [file](), [freebsd](), [linux](), [lookat](), [manpage](), [ncurses](), [netbsd](), [openbsd](), [release](), [unix]() ### AI overview Lookat 2.1.0rc1 is the first release candidate of version 2.1.0 and adds ANSI color support to the Unix file browser/viewer Lookat/Bekijk, which supports colored man pages. ### Source excerpt Lookat 2.1.0rc1 is the latest development release of Lookat/Bekijk, a user-friendly Unix file browser/viewer that supports colored man pages. The focus of the 2.1.0 release is to add ANSI Color support. News 8 Jun 2025 Lookat 2.1.0rc1 Released Lookat 2.1.0rc1 is the first release candicate of Lookat 2.1.0 ChangeLog Lookat / Bekijk 2.1.0rc1 ANSI Color support ## Using AI to aid color scheme migrations DevFeed: [Using AI to aid color scheme migrations]() Original publisher: [Read original article]() Author: Carlos Alexandro Becker Published: 2024-10-31T00:00:00Z Content type: tutorial Language: en Sources: [Carlos Becker]() Topics: [Artificial Intelligence](), [color](), [scheme](), [Claude](), [dotfiles](), [Terminal](), [Command-line interface]() Tags: [ai](), [claude](), [code](), [color](), [command-line](), [fzf](), [scheme](), [terminal]() ### AI overview A short practical post about using AI, especially Claude, to migrate color themes across dotfiles and developer tools. It demonstrates adapting a Catppuccin fzf theme to Gruvbox and suggests refactoring existing theme files with editor or command-line AI tools. ### Source excerpt Recently I found a good use case for AI when migrating my dotfiles to another theme. This is a short post about it. ## Change App Theme - Personalizing Accessibility DevFeed: [Change App Theme - Personalizing Accessibility]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2025-06-11T04:23:10.332000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Accessibility](), [personalization](), [Dark Mode](), [color](), [Users]() Tags: [accessibility](), [color](), [dark-mode](), [personalization](), [settings](), [users]() ### AI overview This tutorial explains how to add an app theme setting as part of personalizing accessibility. It presents four options: system settings, light, dark, and high-contrast themes, and describes storing the selection and applying the corresponding theme. ### Source excerpt I'm continuing the theme of personalizing accessibility, which I've started with my two posts. You can find them from the following links: Personalizing Accessibility with Settings Toggle Labels With Icons -- Personalizing Accessibility As a quick recap, in the previous posts, I've discussed how personalization can generally be the key to improving accessibility, and given a concrete example of adding a setting to hide or display labels with icons. In this blog post, I will continue with concrete examples. We will add a setting to change the app's theme. The user will have four options: follow system settings (the default), light, dark, and high-contrast color theme. Let's dive in. Why? Sometimes, users want to use their apps with a different theme than what their phone has as its theme. Personally, I use everything in dark mode, but I've encountered some apps with dark themes with colors that are unusable for me. They either have too much contrast, or sometimes, too little. In those cases, I wanted to change to a light theme. Usually, there has been no such option, so I've either abandoned the app or used it as little as possible if I needed to use it. So it's all about giving users the control. The minimum options for this type of setting would be the system default, light, and dark. But what about the high-contrast theme? Why would you want to add that? Who even needs it? High-Contrast Theme A high-contrast theme has a limited color palette with higher contrast colors. One concrete example is Windows High-Contrast Mode, which was developed for Windows 7 and later. Android provides a setting for high-contrast text, but it only applies to text, not graphics. WebAIM surveyed low-vision users in 2018, showing that 51.4% of the respondents (n=248) used a high-contrast mode. Low-vision users are a large group needing high-contrast themes, but there are others as well. For example, people with migraines, Irlene syndrome, or some people with dyslexia might benefit from hi ## Material Design Components for Android 1.11.0 and 1.12.0 DevFeed: [Material Design Components for Android 1.11.0 and 1.12.0]() Original publisher: [Read original article]() Published: 2024-05-08T13:00:00Z Content type: release Language: en Sources: [Material.io - Material Design]() Topics: [Material Design](), [Android](), [color]() Tags: [android](), [color](), [components](), [material-design]() ### AI overview A release update for Material Design Components for Android versions 1.11.0 and 1.12.0, covering new color options and carousel refinements. ### Source excerpt New color options and carousel refinements ## Modern CSS patterns in Campfire DevFeed: [Modern CSS patterns in Campfire]() Original publisher: [Read original article]() Author: Jason Zimdars Published: 2024-04-04T17:00:00Z Content type: article Language: en Sources: [37signals Dev]() Topics: [CSS](), [Web platform](), [modern web development](), [Web Development](), [color](), [view transitions]() Tags: [code](), [color](), [css](), [features](), [patterns](), [view-transitions](), [web](), [web-platform]() ### AI overview An in-depth look at how 37signals built ONCE/Campfire with vanilla CSS, no build step, and modern web platform features. It covers CSS nesting, relational and selector functions, wide-gamut colors, View Transitions, and color systems using oklch(). ### Source excerpt An in-depth look at how 37signals built ONCE/Campfire using modern features, vanilla CSS, and no frameworks or preprocessors. ## An updated theming experience with Material Theme Builder 2.0 DevFeed: [An updated theming experience with Material Theme Builder 2.0]() Original publisher: [Read original article]() Published: 2023-12-19T13:00:00Z Content type: release Language: en Sources: [Material.io - Material Design]() Topics: [color]() Tags: [color](), [major](), [updated]() ### AI overview Material Theme Builder 2.0 introduces an updated theming experience and a major update that includes Color Match, marking two years of Material Theme Builder. ### Source excerpt Celebrating two years of MTB with a major update including Color Match ## Moon Phases - Art DevFeed: [Moon Phases - Art]() Original publisher: [Read original article]() Author: Stanko Published: 2023-11-25T00:00:00Z Content type: article Language: en Sources: [Stanko Tadić]() Topics: [Code](), [color](), [GitHub]() Tags: [art](), [code](), [color](), [github]() ### AI overview A moon phases artwork plotted with five different color markers, with code available on GitHub. The creator notes that the metallic color reflections are difficult to capture in photographs. ### Source excerpt It is incredibly hard to take a good photo of these. Colors have metallic reflection which I wasn't able to capture, but it is very prominent in person. They are plotted using five different color markers. I framed them separately and plan to take a better photo once they are on the wall. Code is available on my GitHub. Created: November 2023Size: 14.5x14.5cmPaper: Fabriano Black Black 300gsmPens: UniBall Signo and Sakura Jelly Rolls ## More Accessible Graphs with Jetpack Compose Part 3: Differentiating without Color DevFeed: [More Accessible Graphs with Jetpack Compose Part 3: Differentiating without Color]() Original publisher: [Read original article]() Author: Eevis Panula Published: 2025-06-11T04:27:29.325000Z Content type: tutorial Language: en Sources: [Eevis Blog]() Topics: [Graphs](), [Jetpack Compose](), [color](), [Code](), [function](), [properties]() Tags: [accessible](), [code](), [color](), [function](), [graphs](), [jetpack-compose](), [patterns](), [properties]() ### AI overview The third article in a series on accessible graphs with Jetpack Compose explains why data should not be differentiated by color alone. It demonstrates using different point shapes and line patterns to improve distinguishability for people with color-vision differences and across screens with varying color reproduction. ### Source excerpt This blog post is the third one in my series on more accessible graphs with Jetpack Compose. You can find the previous two from the following links: More Accessible Graphs with Jetpack Compose Part 1: Adding Content Description More Accessible Graphs with Jetpack Compose Part 2: Adding Keyboard Interaction The third topic we will cover is differentiating data by other means than color. Color is a convenient way to distinguish data, but what if you can't see color? Or what if you see colors differently? For example, the example project we've been developing during the blog post series would look like this for someone who can't see color at all: And someone with red-green color blindness: Another aspect of why not use color alone is that phone screens display color differently. A noticeable difference on a high-end external screen for a designer might be almost the same shades for a lower-end phone, making usage impossible. There are better ideas than just using color to differentiate data. In the next section, let's explore some of these other ways. Options for Color When talking about graphs, there are generally two ways to improve the distinguishability of data: Shapes and patterns. For example, if a bar chart is initially differentiated by color, adding patterns for different colors could differentiate those bars. For a line chart, both these options are valid. Let's explore both and differentiate the data by adding different shapes for points and some patterns for the line. This solution is not the most beautiful because I'm mixing these two options, but it's there to demonstrate, not to be a final design. The Code In the situation we're starting with, the function we're using to draw the data points looks like this: drawPoints( points = pixelPoints.map { Offset(it.x + 20f, it.y) }, pointMode = PointMode.Points, color = color, strokeWidth = 8.dp.toPx(), cap = StrokeCap.Round, ) It takes the points and point mode from the parameters, and other than that, everythin ## Simple colorful logging in Node.js DevFeed: [Simple colorful logging in Node.js]() Original publisher: [Read original article]() Author: Stanko Published: 2023-04-08T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Node.js](), [Terminal](), [Logging](), [color](), [console](), [Script](), [ASCII]() Tags: [ansi](), [ascii](), [color](), [commands](), [console](), [logging](), [node-js](), [script](), [terminal]() ### AI overview A tutorial showing how to create simple colorful console logs in Node.js with ANSI escape codes, including a small reusable script, recommendations for picocolors and Chalk, and a browser-console alternative using CSS. ### Source excerpt When writing Node.js scripts, I often want to output information to the console in different colors. Usually, it is to get the user's attention and signalize success or error. I could reach for a battle-tested library like Chalk, but I usually don't need all of its features. Instead, I have a tiny script I copy from project to project: const reset = "\x1b[0m"; const log = { green: (text) => console.log("\x1b[32m" + text + reset), red: (text) => console.log("\x1b[31m" + text + reset), blue: (text) => console.log("\x1b[34m" + text + reset), yellow: (text) => console.log("\x1b[33m" + text + reset), }; Then, I can easily log things in color: log.green("This seems like a very successful message"); log.red("Something might have gone wrong"); log.blue("I'm here to inform you of something"); log.yellow("Lemon 🍋"); Once executed, it looks like this: How it works # The script uses something called ANSI escape codes. It is a way to give commands to a terminal by passing sequences of bytes, usually starting with an ASCII escape character \x1b. They are mostly used to move the cursor and to change the color or styling of the text. They are standardized, and they should work on any platform. For example, \x1b[31m is an escape sequence that tells our terminal to switch color to red. All text after it will be red, until we pass the reset sequence \x1b[0m, which will revert text to the default color. More robust version # If you need more features, I suggest using an existing library. I usually recommend picking one of these two: picocolors - when I need more robust but still lightweight library Chalk - when I need a fully featured coloring library Browser # As a bonus, let's see how we can use color in a browser's console. Escape sequences are not going to work, but we can actually use CSS. console.log("%c🍋 Lemon", "background: black; color: yellow;"); Everything after %c will be styled using CSS defined in the parameter after it. Open the console in your browser and click on the b ## Using color-mix() to create opacity variants DevFeed: [Using color-mix() to create opacity variants]() Original publisher: [Read original article]() Published: 2023-03-31T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [color](), [Web Development](), [browsers]() Tags: [browsers](), [chrome](), [css](), [demo](), [experimental](), [firefox-nightly](), [guide](), [safari]() ### AI overview This tutorial explains how CSS color-mix() can create semi-opaque variants of brand colors by mixing them with the transparent color value. It also discusses browser support, color spaces, and a related DevTools demo. ### Source excerpt Build an alpha color system without splitting out channels using this one neat trick. ## Introducing Tone-based Surfaces in Material 3 DevFeed: [Introducing Tone-based Surfaces in Material 3]() Original publisher: [Read original article]() Published: 2023-03-23T13:00:00Z Content type: article Language: en Sources: [Material.io - Material Design]() Topics: [color]() Tags: [color](), [features](), [flexibility](), [rich]() ### AI overview Material 3 introduces tone-based surface color roles, offering more flexibility for large screens and richer color features. ### Source excerpt New surface color roles offer more flexibility for large screens and rich color features ## Improving color quantization heuristics DevFeed: [Improving color quantization heuristics]() Original publisher: [Read original article]() Published: 2022-12-31T12:00:43Z Content type: article Language: en Sources: [The Last Static Blog RSS]() Topics: [quantization](), [color](), [Algorithm](), [FFmpeg (Fast Forward Moving Picture Experts Group)](), [Compression](), [image animation]() Tags: [algorithm](), [article](), [blog](), [color](), [compression](), [ffmpeg](), [gif](), [math](), [prog](), [quantization]() ### AI overview The article examines improvements to color quantization heuristics, including evaluating color distances in a perceptually uniform color space such as OkLab instead of using Euclidean distance between RGB values. It explains palette quantization as reducing an image's colors to a smaller representative subset, with applications including compression, limited-palette codecs such as GIF, and artistic effects. ### Source excerpt In 2015, I wrote an article about how the palette color quantization was improved in FFmpeg in order to make nice animated GIF files. For some reason, to this day this is one of my most popular article. As time passed, my experience with colors grew and I ended up being quite ashamed and frustrated with the state of these filters. A lot of the code was naive (when not terribly wrong), despite the apparent good results. One of the major change I wanted to do was to evaluate the color distances using a perceptually uniform color space, instead of using a naive euclidean distance of RGB triplets. As usual it felt like a week-end long project; after all, all I have to do is change the distance function to work in a different space, right? Well, if you're following my blog you might have noticed I've add numerous adventures that stacked up on each others: I had to work out the colorspace with integer arithmetic first ...which forced me to look into integer division more deeply ...which confronted me to all sort of undefined behaviours in the process And when I finally reached the point where I could make the switch to OkLab (the perceptual colorspace), a few experiments showed that the flavor of the core algorithm I was using might contain some fundamental flaws, or at least was not implementing optimal heuristics. So here we go again, quickly enough I find myself starting a new research study in the pursuit of understanding how to put pixels on the screen. This write-up is the story of yet another self-inflicted struggle. Palette quantization But what is palette quantization? It essentially refers to the process of reducing the number of available colors of an image down to a smaller subset. In sRGB, an image can have up to 16.7 million colors. In practice though it's generally much less, to the surprise of no one. Still, it's not rare to have a few hundreds of thousands different colors in a single picture. Our goal is to reduce that to something like 256 colors that r [Next page]()