--- title: "Mixing color directly in CSS" publication: "Frontend Focus" issue: 578 published_at: "2023-02-01" canonical_url: "https://frontendfoc.us/issues/578" --- Plus how to create an accessible theme picker. | [TOGETHER WITH ▶ Whiskey Web and Whatnot](https://www.whiskeywebandwhatnot.fm/debating-react-fonts-and-fatherhood-with-josh-collinsworth/) #​578 — February 1, 2023 | [Read on the web](https://frontendfoc.us/issues/578) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1675250626/qn5cxacriukiqxj9jnlw.png)](https://developer.chrome.com/blog/css-color-mix/) [CSS color-mix()](https://developer.chrome.com/blog/css-color-mix/) — Browser [support is lacking](https://caniuse.com/mdn-css_types_color_color-mix) right now, but [the CSS `color-mix()` function](https://www.w3.org/TR/css-color-5/#funcdef-color-mix) is set to ship in Chrome 111. It can be used to take any colors, in any of the supported color spaces, and mix them directly from your stylesheet. This post explains how. Adam Argyle (Chrome Developers) **🎨 RELATED** — _Sticking with the topic of handling color in CSS_: - [Manuel Matuzović looks at CSS color functions and custom properties](https://www.matuzo.at/blog/2023/hsl-custom-properties/), highlighting the appeal of functions like `hsl()`, `hwb()`, and`lab()`. - Austin Gil brings together [a handy list for working with CSS Name Colors](https://austingil.com/css-named-colors/). It contains Named Color groups, palettes, favorites, and even fun facts. [![\](https://copm.s3.amazonaws.com/4b815aee.png)](https://www.whiskeywebandwhatnot.fm/debating-react-fonts-and-fatherhood-with-josh-collinsworth/) ▶[React Isn’t Great at Anything Except Being Popular](https://www.whiskeywebandwhatnot.fm/debating-react-fonts-and-fatherhood-with-josh-collinsworth/) — You may have seen the controversial blog post by Josh Collinsworth about React not being the best choice anymore. In this episode, we dive into why React hasn’t aged well and what the best frameworks are today. Whiskey Web and Whatnot sponsorpodcast [Easy SVG Customization and Animation: A Practical Guide](https://www.smashingmagazine.com/2023/01/svg-customization-animation-practical-guide/) — Adrian Bece notes that devs may often feel discouraged from editing SVG markup and experimenting with animations, thinking it’s a significant time investment or there is a need to use a complex animation libraries. Here, he showcases some of his favorite SVG tricks, making the process streamlined and fun. Plenty of neat examples here too to help things along. Smashing Magazine **⚡️ IN BRIEF** - After 28 years the W3C, undoubtedly one of the most important organizational bodies working on the web, has [re-launched as a public-interest non-profit](https://www.w3.org/blog/news/archives/9823). There's some [additional context here](https://associationsnow.com/2022/08/world-wide-web-consortium-w3c-nonprofit-transition/) if you want to know more about the change. - Netlify announced today that they have [acquired Gatsby](https://www.netlify.com/press/netlify-acquires-gatsby-inc-to-accelerate-adoption-of-composable-web-architectures/). - Thinking about the size of your site and how it may load on mobile? [This chart shows the average cost of 1GB of mobile data](https://www.statista.com/chart/17247/the-average-cost-of-mobile-data-in-selected-countries/) in selected countries. - Discord user? The [MDN Web Docs has a community server.](https://twitter.com/MozDevNet/status/1620197658748137472) - [▶️ A quick video](https://www.youtube.com/watch?v=uVVH6b7ltYo) showing you what _View Transitions_ for the web enable. - Adriana and Diego, from Google and Microsoft respectively, [▶️ share three tips to improve your web app's experience](https://www.youtube.com/watch?v=AhMstpK2U-Y). - Did you know [the World Wide Web once had its own _logo_?](https://mastodon.social/@hisham_hm/109763134817091708) 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_800,e_sharpen:60,q_auto/v1675247620/cwjcnjxdyv9bonfwz1qs.png)](https://fossheim.io/writing/posts/accessible-theme-picker-html-css-js/) [Building an Accessible Theme Picker](https://fossheim.io/writing/posts/accessible-theme-picker-html-css-js/) — This is an attractively presented and easy to follow tutorial for a handy site feature, complete with keyboard navigation and screen reader support. Sarah L. Fossheim [Three Attributes for Better Web Forms](https://adactio.com/journal/19842) — They’re `inputmode`, `enterkeyhint`, and `autocomplete`. Jeremy Keith [`scrollend`: A New JavaScript Event](https://developer.chrome.com/blog/scrollend-a-new-javascript-event/) — Finally an event you won’t need a hotel booking for. `scrollend` provides a new way to detect that a scrolling operation is complete in the browser. Is it another Chrome-only nicety? [Surprisingly not](https://caniuse.com/mdn-api_element_scrollend_event) – Firefox 109+ supports it too. Adam Argyle (Chrome Team) [Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=fourletter) — The best issue tracking software is one that software developers are actually happy to use. Shortcut (formerly Clubhouse.io) sponsor [Accessible Hamburger Buttons _Without_ JavaScript](https://www.pausly.app/blog/accessible-hamburger-buttons-without-javascript) — Sometimes you need to consider if modern techniques allow you to _avoid_ JavaScript. [Here’s a CodePen](https://codepen.io/enyo/pen/yLqjrOR) if you want to play. Pausly [Creating a High-Contrast Design System with CSS Custom Properties](https://www.smashingmagazine.com/2023/01/creating-high-contrast-design-system-css-custom-properties/) — Managing our colors can truly help people to access our content — as such, this article takes a deep dive into how we can create a high-contrast system while maintaining a balance between designing something accessible and respecting the look and feel of a brand. Brecht De Ruyte [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1675247945/qwuozloge84capisxcyw.png)](https://blog.stephaniestimac.com/posts/2023/1/css-initial-letter/) [Greater Styling Control Over Type with `initial-letter`](https://blog.stephaniestimac.com/posts/2023/1/css-initial-letter/) — An overview of the new CSS property `initial-letter` for more styling control over the first letter. Stephanie Stimac [Your Web Performance is Too Reactive; It’s Time to Do More Than Put Out Fires - Calibre](https://calibreapp.com/blog/proactive-performance) — Notes that a ‘wait-and-see speed strategy’ isn’t the best for your site, before offering up some pointers on being proactive with web performance, how best to test, and how to get buy-in from your team. Karolina Szczur [Why We Switched CDNs: How Google's Core Web Vitals Led Us to Cloudflare Pages](https://electricui.com/blog/switching-to-cloudflare-pages) — In order to deal with issues with time to first byte (TTFB) in their Core Web Vitals assessment, this post compares TTFB results from Netlify, Vercel, Cloudflare Pages and Gatsby Cloud. Michael Orenstein [A Better Way to Work With Number and Date Inputs in JavaScript](https://www.builder.io/blog/numbers-and-dates) Steve Sewell [Screen Readers' Support for Text Level HTML Semantics](https://www.tpgi.com/screen-readers-support-for-text-level-html-semantics/) Steve Faulkner [How to Lazy Load Disqus for Improved Site Performance](https://www.macarthur.me/posts/lazy-load-disqus) Alex MacArthur 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1675258818/jdtjvtcllds3t0f1did4.png)](https://sailboatui.com/) [Sailboat UI: A Modern UI Component Library for Tailwind CSS](https://sailboatui.com/) — Includes a common set of 150+ ready-to-use components and is easy to theme to your liking based on configuration settings. Sailboat UI [Shoelace 2.0: 'A Forward-Thinking Library of Web Components'](https://shoelace.style/) — A collection of well designed every day UI components (buttons, drawers, inputs, menus, color pickers, and more) built in a framework agnostic way. Cory LaViska [Need an Extra Pair of Hands on Your React Project? Contact Us 🚀](https://www.upgradejs.com/?utm_source=cooperpress&utm_medium=frontend-focus&utm_campaign=44958&utm_term=service-agency&utm_content=contact-us) UpgradeJS by OmbuLabs sponsor [GradienMood: Generate a Gradient from a Mood](https://gradienmood.posandu.me/) — This is different! Type a word or prompt representing a “mood” and this AI-based tool will show you a copy/pasteable CSS gradient that matches what you typed (_try 'calm looking gradient that is purplish color' for example_). There’s also a gallery of “moods” to browse. GradienMood [Theme Toggles: A Small Set of Unique, Animated Dark Mode Toggles](https://toggles.dev/) — They’re all built with SVG, accessible, and can be included as inline SVG or React, and of course you can try out each one directly on the page. Theme Toggles [`clamp()` Calculator: A Handy Tool for Getting Viewport-Based Clamped Values](https://chrisburnell.com/clamp-calculator/) Chris Burnell [CodeImage: A Tool to Manage and Beautify Your Code Screenshots](https://codeimage.dev/) Riccardo Perra 🧑‍💻 JOBS [Developer Relations Manager](https://cksource.com/careers/?utm_source=jsweekly&utm_medium=email&utm_campaign=jan06#developer-relations-manager) — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀 CKEditor [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=easy-job-hunting) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/578/*|UID|*?ipx=t)