{"id":267695,"date":"2018-03-02T15:20:07","date_gmt":"2018-03-02T22:20:07","guid":{"rendered":"http:\/\/css-tricks.com\/?p=267695"},"modified":"2018-03-02T15:20:07","modified_gmt":"2018-03-02T22:20:07","slug":"v6-color","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/v6-color\/","title":{"rendered":"V6: Color"},"content":{"rendered":"

This is a lovely little post by Rob Weychert<\/a> about color theory, hierarchy and how to implement those colors in a design system. It\u2019s particularly interesting hearing what Rob has to say on HSL, which is an alternative way of setting the color of an element in CSS:<\/p>\n

For color adjustment, HSL brings a level of granular control to the process that other color systems lack. And for implementation, Sass lets me assign color values to variables, which make system-wide iteration quick and painless.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

This is a lovely little post by Rob Weychert about color theory, hierarchy and how to implement those colors in a design system. It\u2019s particularly interesting hearing what Rob has to say on HSL, which is an alternative way of setting the color of an element in CSS: For color adjustment, HSL brings a level […]<\/p>\n","protected":false},"author":223806,"featured_media":267705,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[837],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/color-wheels.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":356611,"url":"https:\/\/css-tricks.com\/color-alpha-anywhere\/","url_meta":{"origin":267695,"position":0},"title":"Color Alpha Anywhere","date":"November 15, 2021","format":false,"excerpt":"In my \"Different Degrees of Custom Property\u00a0Usage\" article, I noted a situation about colors and CSS custom properties where I went \"too far\" with breaking up HSL color values. Breaking every single color into its H, S, and L parts is may be a step too far. But you probably\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/stripe-accessible-colors.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":301297,"url":"https:\/\/css-tricks.com\/the-best-color-functions-in-css\/","url_meta":{"origin":267695,"position":1},"title":"The Best Color Functions in CSS?","date":"January 20, 2020","format":false,"excerpt":"I've said before that HSL is the best color format we have. Most of us aren't like David DeSandro, who can read hex codes. HSL(a) is Hue, Saturation, Lightness, and alpha, if we need it. hsl(120, 100%, 40%) Hue isn't intuitive, but it's not that weird. You take a trip\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/stripe-accessible-colors.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":300936,"url":"https:\/\/css-tricks.com\/so-many-color-links\/","url_meta":{"origin":267695,"position":2},"title":"So Many Color Links","date":"December 27, 2019","format":false,"excerpt":"There's been a run of tools, articles, and resources about color lately. Please allow me to close a few tabs by rounding them up here for your enjoyment. Curated colors in context Happy Hues demonstrates a bunch of color palettes in the context of the site itself. That's a nice\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/Untitled_Artwork-scaled.jpg?fit=1200%2C502&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311311,"url":"https:\/\/css-tricks.com\/the-expanding-gamut-of-color-on-the-web\/","url_meta":{"origin":267695,"position":3},"title":"The Expanding Gamut of Color on the Web","date":"May 27, 2020","format":false,"excerpt":"CSS was introduced to the web all the way back in 1996. At the time, most computer monitors were pretty terrible. The colors of CSS \u2014 whether defined with the RGB, HSL, or hexadecimal format \u2014 catered to the monitors of the time, all within the sRGB colorspace. Most newer\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/color-gamut.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":362285,"url":"https:\/\/css-tricks.com\/new-css-color-features-preview\/","url_meta":{"origin":267695,"position":4},"title":"A Whistle-Stop Tour of 4 New CSS Color Features","date":"February 10, 2022","format":false,"excerpt":"I was just writing in my \"What's new in since CSS3?\" article about recent and possible future changes to CSS colors. It's weirdly a lot. There are just as many or more new and upcoming ways to define colors than what we have now. I thought we'd take a really\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/6-modern-css-color-1.webp?fit=1200%2C463&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353024,"url":"https:\/\/css-tricks.com\/css-in-typescript-with-vanilla-extract\/","url_meta":{"origin":267695,"position":5},"title":"CSS in TypeScript with vanilla-extract","date":"October 7, 2021","format":false,"excerpt":"vanilla-extract is a new framework-agnostic CSS-in-TypeScript library. It\u2019s a lightweight, robust, and intuitive way to write your styles. vanilla-extract isn\u2019t a prescriptive CSS framework, but a flexible piece of developer tooling. CSS tooling has been a relatively stable space over the last few years with PostCSS, Sass, CSS Modules, and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/vanilla-extract.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/color-wheels.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/267695"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=267695"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/267695\/revisions"}],"predecessor-version":[{"id":267706,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/267695\/revisions\/267706"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/267705"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=267695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=267695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=267695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}