--- title: Let CSS Pick Your Text Color | daily.dev description: A deep dive into building a smart badge component using modern CSS color functions — contrast-color(), color-mix(), relative color syntax, and light-dark() —... canonical: https://daily.dev/posts/let-css-pick-your-text-color-gjtsjfd24 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Let CSS Pick Your Text Color | daily.dev og:description: A deep dive into building a smart badge component using modern CSS color functions — contrast-color(), color-mix(), relative color syntax, and light-dark() —... og:url: https://daily.dev/posts/let-css-pick-your-text-color-gjtsjfd24 og:image: https://api.daily.dev/og/posts/GjTSjFD24.png og:image:alt: Let CSS Pick Your Text Color og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Let CSS Pick Your Text Color **[Lit](https://daily.dev/sources/lit)** · [@agustinbarrientos](https://daily.dev/agustinbarrientos) · 2 min read · 4 upvotes · 1 comments ## Summary A deep dive into building a smart badge component using modern CSS color functions — contrast-color(), color-mix(), relative color syntax, and light-dark() — to automatically derive accessible foreground, border, and tonal variants from a single accent color. The piece highlights common pitfalls with each function (e.g., unitless lightness in relative color syntax, color-scheme required for light-dark()), and argues that new CSS color capabilities relocate design judgment rather than eliminate it. Seven live demos illustrate how all derived states update from one input color. ## Content The Senior Eye is where I build one small frontend thing carefully and pull out the judgment that separates a senior from a junior. A badge takes **one accent color** and looks right until someone sets it to brand yellow and the white label all but vanishes. This build walks a `smart-badge` status component that treats a color token the way a senior does, **as a contract across a whole family of states rather than a single value**, a contrast-picked foreground, a border, a tonal accent, and a theme that follows the user. Modern CSS builds all of that in the stylesheet, most of it derived from the one accent, and the component's only JavaScript is the validation guarding its accent door, _never a color derivation_. Along the way you get a grounded tour of the current color functions, `contrast-color()` for the foreground, `color-mix()` for the border and related surfaces, relative color syntax for the tonal variant, and `light-dark()` for the theme, _each with the mistake that bites in practice_. The platform picks `black` on a medium blue where people reflexively reach for `white`, the relative-color lightness math is a unitless number so `calc(l + 20%)` is silently dropped, and `light-dark()` keeps returning its light branch until you declare `color-scheme`. **Seven live demos** let you pour an opaque accent in and watch every derived state, the contrast report, and the generated CSS update together. **The through-line is that new functions don't remove the judgment from color work, they relocate it.** The question stops being how to compute a lighter shade and becomes which derivations CSS can own now and which still belong to your design system, like whether an arbitrary user color is allowed, whether the brand really wants the platform's contrast pick, and where a validated input boundary keeps untrusted values out of your styles. **The code can derive the family, and you still own the policy.** [**Read the full article**](https://agustinbarrientos.com/writing/senior-eye/color-token-contract/) ## Community discussion Top comments from developers on daily.dev. **@agustinbarrientos** · 0 upvotes > Full article: [https://agustinbarrientos.com/writing/senior-eye/color-token-contract/](https://agustinbarrientos.com/writing/senior-eye/color-token-contract/) --- Tags: [#css](https://daily.dev/tags/css), [#frontend](https://daily.dev/tags/frontend), [#accessibility](https://daily.dev/tags/accessibility), [#design-systems](https://daily.dev/tags/design-systems) [View this post on daily.dev](https://daily.dev/posts/let-css-pick-your-text-color-gjtsjfd24) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/let-css-pick-your-text-color-gjtsjfd24","headline":"Let CSS Pick Your Text Color","text":"A deep dive into building a smart badge component using modern CSS color functions — contrast-color(), color-mix(), relative color syntax, and light-dark() — to automatically derive accessible foreground, border, and tonal variants from a single accent color. The piece highlights common pitfalls with each function (e.g., unitless lightness in relative color syntax, color-scheme required for light-dark()), and argues that new CSS color capabilities relocate design judgment rather than eliminate it. Seven live demos illustrate how all derived states update from one input color.","url":"https://daily.dev/posts/let-css-pick-your-text-color-gjtsjfd24","datePublished":"2026-08-03T15:37:47.042Z","dateModified":"2026-09-13T21:03:38.984Z","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0","description":"Sr UI/UX Designer & Frontend Engineer","worksFor":{"@type":"Organization","name":"Uncanny Owl","logo":"https://www.google.com/s2/favicons?domain=uncannyowl.com&sz=128"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":23770}},"image":"https://media.daily.dev/image/upload/s--H9UdxT7l--/f_auto/v1785771467/posts/GjTSjFD24?_a=BAMAMicg0","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"comment":[{"@type":"Comment","text":"Full article: https://agustinbarrientos.com/writing/senior-eye/color-token-contract/","datePublished":"2026-08-17T16:35:08.243Z","url":"https://daily.dev/posts/GjTSjFD24#c-oeUGpKf3N","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/lit","name":"Lit"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Lit","item":"https://daily.dev/squads/lit"},{"@type":"ListItem","position":3,"name":"Let CSS Pick Your Text Color"}]} ```