[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"blog-categories":6,"topic:css-colors-hex-rgb-hsl-oklch":35,"course-tree":169},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,14,19,25,30],{"name":9,"slug":10,"description":11,"post_count":12,"subcategories":13},"CSS","css","Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",2,[],{"name":15,"slug":16,"description":17,"post_count":12,"subcategories":18},"HTML","html","Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":20,"slug":21,"description":22,"post_count":23,"subcategories":24},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",1,[],{"name":26,"slug":27,"description":28,"post_count":23,"subcategories":29},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":31,"slug":32,"description":33,"post_count":23,"subcategories":34},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[],{"data":36},{"id":37,"title":38,"slug":39,"content":40,"course":41,"subcategory":42,"author":45,"reading_time_minutes":51,"cornerstone":52,"schema_type":53,"faq_json":5,"video_url":5,"canonical_url":54,"meta_title":55,"meta_description":56,"og_image":5,"toc_json":57,"code_examples":123,"quiz":140,"exercises":145,"published_at":5,"updated_at":160,"prev":161,"next":165},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch","\u003Ch2 id=\"what-are-css-colors\">What Are CSS Colors?\u003C\u002Fh2>\u003Cp>\u003Cstrong>CSS colors\u003C\u002Fstrong> control the look of text, backgrounds, borders, shadows and more. In this lesson our focus keyword is \u003Cstrong>CSS colors\u003C\u002Fstrong>, and you will learn every major format: \u003Cstrong>HEX\u003C\u002Fstrong>, \u003Cstrong>RGB\u003C\u002Fstrong>, \u003Cstrong>HSL\u003C\u002Fstrong> and the modern \u003Cstrong>OKLCH\u003C\u002Fstrong>. We also cover trending topics that developers search for: CSS color-mix(), relative color syntax, light-dark() for dark mode, wide-gamut Display P3 colors, CSS color palette generation, and color contrast for accessibility.\u003C\u002Fp>\u003Ch2 id=\"1-named-colors-and-keywords\">1. Named Colors and Keywords\u003C\u002Fh2>\u003Cp>CSS has about 148 named colors such as \u003Ccode>tomato\u003C\u002Fcode>, \u003Ccode>rebeccapurple\u003C\u002Fcode> and \u003Ccode>seagreen\u003C\u002Fcode>. Special keywords include \u003Ccode>transparent\u003C\u002Fcode> (fully transparent) and \u003Ccode>currentColor\u003C\u002Fcode>, which uses the element's current text \u003Ccode>color\u003C\u002Fcode>. \u003Ccode>currentColor\u003C\u002Fcode> is very useful for icons and borders that should follow the text color.\u003C\u002Fp>\u003Ch2 id=\"2-hex-colors\">2. HEX Colors\u003C\u002Fh2>\u003Cp>HEX is the most common format. It starts with \u003Ccode>#\u003C\u002Fcode> and uses hexadecimal digits (0-9, a-f).\u003C\u002Fp>\u003Cul>\u003Cli>\u003Ccode>#rrggbb\u003C\u002Fcode>: for example \u003Ccode>#2563eb\u003C\u002Fcode> (red 25, green 63, blue eb).\u003C\u002Fli>\u003Cli>\u003Ccode>#rgb\u003C\u002Fcode>: shorthand when each pair repeats, so \u003Ccode>#fff\u003C\u002Fcode> equals \u003Ccode>#ffffff\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>\u003Ccode>#rrggbbaa\u003C\u002Fcode> and \u003Ccode>#rgba\u003C\u002Fcode>: the last pair is alpha (opacity). \u003Ccode>#00000080\u003C\u002Fcode> is black at about 50% opacity.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"3-rgb-colors\">3. RGB Colors\u003C\u002Fh2>\u003Cp>\u003Ccode>rgb(37 99 235)\u003C\u002Fcode> defines red, green and blue channels from 0 to 255 (or percentages). Modern syntax uses spaces and a slash for alpha: \u003Ccode>rgb(37 99 235 \u002F 50%)\u003C\u002Fcode>. The old comma syntax \u003Ccode>rgba(37, 99, 235, 0.5)\u003C\u002Fcode> still works, but \u003Ccode>rgb()\u003C\u002Fcode> now accepts alpha too, so \u003Ccode>rgba()\u003C\u002Fcode> is no longer needed.\u003C\u002Fp>\u003Ch2 id=\"4-hsl-colors\">4. HSL Colors\u003C\u002Fh2>\u003Cp>\u003Ccode>hsl(221 83% 53%)\u003C\u002Fcode> stands for Hue, Saturation, Lightness. Hue is an angle on the color wheel (0 = red, 120 = green, 240 = blue), saturation is color intensity, and lightness runs from 0% (black) to 100% (white). HSL is human friendly: to make a hover color, just lower the lightness by 8%. It is great for building palettes with CSS variables.\u003C\u002Fp>\u003Ch2 id=\"5-oklch-the-modern-color-space\">5. OKLCH: The Modern Color Space\u003C\u002Fh2>\u003Cp>\u003Ccode>oklch(62% 0.2 260)\u003C\u002Fcode> has three parts: \u003Cstrong>L\u003C\u002Fstrong> lightness (0% to 100%), \u003Cstrong>C\u003C\u002Fstrong> chroma (color intensity, roughly 0 to 0.4) and \u003Cstrong>H\u003C\u002Fstrong> hue angle (0 to 360). OKLCH is \u003Cem>perceptually uniform\u003C\u002Fem>: two colors with the same lightness really look equally bright. In HSL, yellow at 50% lightness looks far brighter than blue at 50% lightness, which makes accessible palettes hard. OKLCH fixes this. It can also express wide-gamut colors beyond sRGB on modern screens. Tailwind CSS v4 and many design systems now use OKLCH for their palettes.\u003C\u002Fp>\u003Ch2 id=\"6-format-comparison\">6. Format Comparison\u003C\u002Fh2>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>Format\u003C\u002Fth>\u003Cth>Example\u003C\u002Fth>\u003Cth>Best for\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>HEX\u003C\u002Ftd>\u003Ctd>\u003Ccode>#2563eb\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Copying from design tools, short values\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>RGB\u003C\u002Ftd>\u003Ctd>\u003Ccode>rgb(37 99 235 \u002F 50%)\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Transparency, JavaScript work\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>HSL\u003C\u002Ftd>\u003Ctd>\u003Ccode>hsl(221 83% 53%)\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Simple palettes and hover states\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>OKLCH\u003C\u002Ftd>\u003Ctd>\u003Ccode>oklch(62% 0.2 260)\u003C\u002Fcode>\u003C\u002Ftd>\u003Ctd>Accessible, consistent, wide-gamut palettes\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2 id=\"7-modern-color-functions\">7. Modern Color Functions\u003C\u002Fh2>\u003Ch3 id=\"color-mix\">color-mix()\u003C\u002Fh3>\u003Cp>Mixes two colors in a chosen color space: \u003Ccode>color-mix(in oklch, #2563eb 70%, white)\u003C\u002Fcode> creates a lighter tint without extra variables.\u003C\u002Fp>\u003Ch3 id=\"relative-color-syntax\">Relative color syntax\u003C\u002Fh3>\u003Cp>Derive a new color from an existing one: \u003Ccode>oklch(from var(--brand) calc(l + 0.1) c h)\u003C\u002Fcode> makes a lighter version of \u003Ccode>--brand\u003C\u002Fcode>. You can also change alpha: \u003Ccode>rgb(from var(--brand) r g b \u002F 40%)\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3 id=\"light-dark\">light-dark()\u003C\u002Fh3>\u003Cp>Returns the first color in light mode and the second in dark mode: \u003Ccode>color: light-dark(#111, #eee);\u003C\u002Fcode>. It requires \u003Ccode>color-scheme: light dark\u003C\u002Fcode> on the element or on \u003Ccode>:root\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch3 id=\"display-p3-with-color\">Display P3 with color()\u003C\u002Fh3>\u003Cp>\u003Ccode>color(display-p3 0 1 0)\u003C\u002Fcode> can show a more vivid green than any sRGB color. Always provide an sRGB fallback before it.\u003C\u002Fp>\u003Ch2 id=\"8-colors-and-accessibility\">8. Colors and Accessibility\u003C\u002Fh2>\u003Cul>\u003Cli>WCAG requires a contrast ratio of at least \u003Cstrong>4.5:1\u003C\u002Fstrong> for normal text and \u003Cstrong>3:1\u003C\u002Fstrong> for large text (18px bold or 24px regular).\u003C\u002Fli>\u003Cli>Never use color as the only way to show meaning (for example errors). Add icons or text.\u003C\u002Fli>\u003Cli>Support dark mode with \u003Ccode>prefers-color-scheme\u003C\u002Fcode> or \u003Ccode>light-dark()\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Test with DevTools color picker, which shows the contrast ratio.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"9-best-practices\">9. Best Practices\u003C\u002Fh2>\u003Cul>\u003Cli>Store brand colors in CSS custom properties: \u003Ccode>--brand: oklch(62% 0.2 260);\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Prefer OKLCH or HSL for palettes and use HEX only when copying from tools.\u003C\u002Fli>\u003Cli>Use \u003Ccode>currentColor\u003C\u002Fcode> for icons and SVG.\u003C\u002Fli>\u003Cli>Use \u003Ccode>color-mix()\u003C\u002Fcode> for tints and shades rather than hand-typing many variants.\u003C\u002Fli>\u003Cli>Provide fallbacks for very new features with \u003Ccode>@supports\u003C\u002Fcode>.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"10-common-mistakes\">10. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Using a comma inside the space-separated syntax, for example \u003Ccode>rgb(37, 99 235)\u003C\u002Fcode>, which is invalid.\u003C\u002Fli>\u003Cli>Forgetting that \u003Ccode>opacity\u003C\u002Fcode> fades the whole element, while alpha in a color fades only that color.\u003C\u002Fli>\u003Cli>Using low-contrast light gray text on white.\u003C\u002Fli>\u003Cli>Writing HEX with 5 or 7 digits, which is invalid.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"summary\">Summary\u003C\u002Fh2>\u003Cp>HEX, RGB, HSL and OKLCH all describe colors, but OKLCH gives the most predictable results for modern design systems. Combine them with \u003Ccode>color-mix()\u003C\u002Fcode>, relative colors and \u003Ccode>light-dark()\u003C\u002Fcode> for flexible themes. Try the live examples below.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .sw { display: inline-block; width: 110px; height: 70px; margin: 4px; padding: 6px; color: #fff; font: 12px sans-serif; border-radius: 8px; }\n<\u002Fstyle>\n<div class='sw' style='background: tomato'>named<\u002Fdiv>\n<div class='sw' style='background: #2563eb'>#2563eb<\u002Fdiv>\n<div class='sw' style='background: rgb(22 163 74)'>rgb()<\u002Fdiv>\n<div class='sw' style='background: hsl(280 70% 50%)'>hsl()<\u002Fdiv>\n<div class='sw' style='background: oklch(65% 0.2 30)'>oklch()<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  .bg { padding: 20px; font-family: sans-serif; background: repeating-conic-gradient(#e2e8f0 0% 25%, #fff 0% 50%) 50% \u002F 20px 20px; }\n  .a { display: inline-block; width: 120px; height: 80px; margin: 6px; color: #fff; padding: 6px; }\n<\u002Fstyle>\n<div class='bg'>\n  <div class='a' style='background: rgb(37 99 235 \u002F 100%)'>100%<\u002Fdiv>\n  <div class='a' style='background: rgb(37 99 235 \u002F 60%)'>60%<\u002Fdiv>\n  <div class='a' style='background: #2563eb33'>HEX 20%<\u002Fdiv>\n  <div class='a' style='background: hsl(221 83% 53% \u002F 0.4)'>HSL 40%<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root { --h: 220; }\n  body { font-family: sans-serif; }\n  .row { display: flex; }\n  .row div { flex: 1; height: 60px; color: #fff; font-size: 12px; padding: 4px; }\n  .l1 { background: hsl(var(--h) 80% 90%); color: #000; }\n  .l2 { background: hsl(var(--h) 80% 70%); color: #000; }\n  .l3 { background: hsl(var(--h) 80% 50%); }\n  .l4 { background: hsl(var(--h) 80% 35%); }\n  .l5 { background: hsl(var(--h) 80% 20%); }\n<\u002Fstyle>\n<p>Change --h above (0 to 360) to build a whole palette from one hue.<\u002Fp>\n<div class='row'><div class='l1'>90%<\u002Fdiv><div class='l2'>70%<\u002Fdiv><div class='l3'>50%<\u002Fdiv><div class='l4'>35%<\u002Fdiv><div class='l5'>20%<\u002Fdiv><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font-family: sans-serif; }\n  .row { display: flex; margin-bottom: 8px; }\n  .row div { flex: 1; height: 50px; color: #fff; font-size: 11px; padding: 4px; }\n  .hsl div:nth-child(1) { background: hsl(60 100% 50%); color: #000; }\n  .hsl div:nth-child(2) { background: hsl(120 100% 50%); color: #000; }\n  .hsl div:nth-child(3) { background: hsl(240 100% 50%); }\n  .ok div:nth-child(1) { background: oklch(80% 0.15 100); color: #000; }\n  .ok div:nth-child(2) { background: oklch(80% 0.15 150); color: #000; }\n  .ok div:nth-child(3) { background: oklch(80% 0.15 260); color: #000; }\n<\u002Fstyle>\n<p>HSL with equal lightness: brightness looks uneven.<\u002Fp>\n<div class='row hsl'><div>yellow<\u002Fdiv><div>green<\u002Fdiv><div>blue<\u002Fdiv><\u002Fdiv>\n<p>OKLCH with equal lightness: brightness looks even.<\u002Fp>\n<div class='row ok'><div>yellow<\u002Fdiv><div>green<\u002Fdiv><div>blue<\u002Fdiv><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  :root { color-scheme: light dark; --brand: oklch(62% 0.2 260); }\n  body { font-family: sans-serif; padding: 16px; background: light-dark(#ffffff, #0f172a); color: light-dark(#0f172a, #f8fafc); }\n  .btn { padding: 10px 18px; border: 0; border-radius: 8px; color: #fff; background: var(--brand); margin: 6px; cursor: pointer; }\n  .btn:hover { background: color-mix(in oklch, var(--brand) 80%, black); }\n  .tint { background: color-mix(in oklch, var(--brand) 20%, white); color: #000; padding: 10px; border-radius: 8px; }\n  .rel { background: oklch(from var(--brand) calc(l + 0.15) c h); color: #000; padding: 10px; border-radius: 8px; margin-top: 8px; }\n<\u002Fstyle>\n<button class='btn'>Hover me (color-mix)<\u002Fbutton>\n<div class='tint'>color-mix tint of the brand color<\u002Fdiv>\n<div class='rel'>Relative color: lighter brand via oklch(from ...)<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":9,"slug":10},{"name":43,"slug":44},"Colors, Backgrounds & Effects","colors-backgrounds-effects",{"slug":46,"display_name":47,"job_title":5,"short_bio":5,"expertise_tags":48,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":49,"posts":50},"badar-khalil","Badar Khalil",[],[],[],5,false,"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Fcss-colors-hex-rgb-hsl-oklch","CSS Colors: HEX, RGB, HSL & OKLCH Explained","Learn CSS colors with HEX, RGB, HSL and OKLCH: alpha, color-mix(), relative colors, light-dark(), contrast and live examples.",[58,62,66,70,74,78,82,86,107,111,115,119],{"id":59,"text":60,"level":12,"children":61},"what-are-css-colors","What Are CSS Colors?",[],{"id":63,"text":64,"level":12,"children":65},"1-named-colors-and-keywords","1. Named Colors and Keywords",[],{"id":67,"text":68,"level":12,"children":69},"2-hex-colors","2. HEX Colors",[],{"id":71,"text":72,"level":12,"children":73},"3-rgb-colors","3. RGB Colors",[],{"id":75,"text":76,"level":12,"children":77},"4-hsl-colors","4. HSL Colors",[],{"id":79,"text":80,"level":12,"children":81},"5-oklch-the-modern-color-space","5. OKLCH: The Modern Color Space",[],{"id":83,"text":84,"level":12,"children":85},"6-format-comparison","6. Format Comparison",[],{"id":87,"text":88,"level":12,"children":89},"7-modern-color-functions","7. Modern Color Functions",[90,95,99,103],{"id":91,"text":92,"level":93,"children":94},"color-mix","color-mix()",3,[],{"id":96,"text":97,"level":93,"children":98},"relative-color-syntax","Relative color syntax",[],{"id":100,"text":101,"level":93,"children":102},"light-dark","light-dark()",[],{"id":104,"text":105,"level":93,"children":106},"display-p3-with-color","Display P3 with color()",[],{"id":108,"text":109,"level":12,"children":110},"8-colors-and-accessibility","8. Colors and Accessibility",[],{"id":112,"text":113,"level":12,"children":114},"9-best-practices","9. Best Practices",[],{"id":116,"text":117,"level":12,"children":118},"10-common-mistakes","10. Common Mistakes",[],{"id":120,"text":121,"level":12,"children":122},"summary","Summary",[],[124,128,131,134,137],{"id":125,"language":16,"code":126,"is_editable":127},254,"\u003Cstyle>\n  .sw { display: inline-block; width: 110px; height: 70px; margin: 4px; padding: 6px; color: #fff; font: 12px sans-serif; border-radius: 8px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='sw' style='background: tomato'>named\u003C\u002Fdiv>\n\u003Cdiv class='sw' style='background: #2563eb'>#2563eb\u003C\u002Fdiv>\n\u003Cdiv class='sw' style='background: rgb(22 163 74)'>rgb()\u003C\u002Fdiv>\n\u003Cdiv class='sw' style='background: hsl(280 70% 50%)'>hsl()\u003C\u002Fdiv>\n\u003Cdiv class='sw' style='background: oklch(65% 0.2 30)'>oklch()\u003C\u002Fdiv>",true,{"id":129,"language":16,"code":130,"is_editable":127},255,"\u003Cstyle>\n  .bg { padding: 20px; font-family: sans-serif; background: repeating-conic-gradient(#e2e8f0 0% 25%, #fff 0% 50%) 50% \u002F 20px 20px; }\n  .a { display: inline-block; width: 120px; height: 80px; margin: 6px; color: #fff; padding: 6px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='bg'>\n  \u003Cdiv class='a' style='background: rgb(37 99 235 \u002F 100%)'>100%\u003C\u002Fdiv>\n  \u003Cdiv class='a' style='background: rgb(37 99 235 \u002F 60%)'>60%\u003C\u002Fdiv>\n  \u003Cdiv class='a' style='background: #2563eb33'>HEX 20%\u003C\u002Fdiv>\n  \u003Cdiv class='a' style='background: hsl(221 83% 53% \u002F 0.4)'>HSL 40%\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":132,"language":16,"code":133,"is_editable":127},256,"\u003Cstyle>\n  :root { --h: 220; }\n  body { font-family: sans-serif; }\n  .row { display: flex; }\n  .row div { flex: 1; height: 60px; color: #fff; font-size: 12px; padding: 4px; }\n  .l1 { background: hsl(var(--h) 80% 90%); color: #000; }\n  .l2 { background: hsl(var(--h) 80% 70%); color: #000; }\n  .l3 { background: hsl(var(--h) 80% 50%); }\n  .l4 { background: hsl(var(--h) 80% 35%); }\n  .l5 { background: hsl(var(--h) 80% 20%); }\n\u003C\u002Fstyle>\n\u003Cp>Change --h above (0 to 360) to build a whole palette from one hue.\u003C\u002Fp>\n\u003Cdiv class='row'>\u003Cdiv class='l1'>90%\u003C\u002Fdiv>\u003Cdiv class='l2'>70%\u003C\u002Fdiv>\u003Cdiv class='l3'>50%\u003C\u002Fdiv>\u003Cdiv class='l4'>35%\u003C\u002Fdiv>\u003Cdiv class='l5'>20%\u003C\u002Fdiv>\u003C\u002Fdiv>",{"id":135,"language":16,"code":136,"is_editable":127},257,"\u003Cstyle>\n  body { font-family: sans-serif; }\n  .row { display: flex; margin-bottom: 8px; }\n  .row div { flex: 1; height: 50px; color: #fff; font-size: 11px; padding: 4px; }\n  .hsl div:nth-child(1) { background: hsl(60 100% 50%); color: #000; }\n  .hsl div:nth-child(2) { background: hsl(120 100% 50%); color: #000; }\n  .hsl div:nth-child(3) { background: hsl(240 100% 50%); }\n  .ok div:nth-child(1) { background: oklch(80% 0.15 100); color: #000; }\n  .ok div:nth-child(2) { background: oklch(80% 0.15 150); color: #000; }\n  .ok div:nth-child(3) { background: oklch(80% 0.15 260); color: #000; }\n\u003C\u002Fstyle>\n\u003Cp>HSL with equal lightness: brightness looks uneven.\u003C\u002Fp>\n\u003Cdiv class='row hsl'>\u003Cdiv>yellow\u003C\u002Fdiv>\u003Cdiv>green\u003C\u002Fdiv>\u003Cdiv>blue\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp>OKLCH with equal lightness: brightness looks even.\u003C\u002Fp>\n\u003Cdiv class='row ok'>\u003Cdiv>yellow\u003C\u002Fdiv>\u003Cdiv>green\u003C\u002Fdiv>\u003Cdiv>blue\u003C\u002Fdiv>\u003C\u002Fdiv>",{"id":138,"language":16,"code":139,"is_editable":127},258,"\u003Cstyle>\n  :root { color-scheme: light dark; --brand: oklch(62% 0.2 260); }\n  body { font-family: sans-serif; padding: 16px; background: light-dark(#ffffff, #0f172a); color: light-dark(#0f172a, #f8fafc); }\n  .btn { padding: 10px 18px; border: 0; border-radius: 8px; color: #fff; background: var(--brand); margin: 6px; cursor: pointer; }\n  .btn:hover { background: color-mix(in oklch, var(--brand) 80%, black); }\n  .tint { background: color-mix(in oklch, var(--brand) 20%, white); color: #000; padding: 10px; border-radius: 8px; }\n  .rel { background: oklch(from var(--brand) calc(l + 0.15) c h); color: #000; padding: 10px; border-radius: 8px; margin-top: 8px; }\n\u003C\u002Fstyle>\n\u003Cbutton class='btn'>Hover me (color-mix)\u003C\u002Fbutton>\n\u003Cdiv class='tint'>color-mix tint of the brand color\u003C\u002Fdiv>\n\u003Cdiv class='rel'>Relative color: lighter brand via oklch(from ...)\u003C\u002Fdiv>",{"id":141,"slug":142,"title":143,"time_limit_seconds":5,"pass_percentage":144,"question_count":51},35,"css-colors-quiz","CSS Colors Quiz",70,[146,153],{"id":147,"title":148,"slug":149,"prompt":150,"starter_code":151,"expected_output":152,"language":16,"order_index":23},105,"Write the Same Color in Four Formats","same-color-four-formats","Style the four boxes so that they all show the same blue (#2563eb) but each box uses a different format: HEX, rgb(), hsl() and oklch(). Approximate values are fine for hsl and oklch: hsl(221 83% 53%) and oklch(55% 0.21 263).","\u003Cstyle>\n  .b { display: inline-block; width: 100px; height: 60px; margin: 4px; }\n  \u002F* Add a background to each class *\u002F\n  .hex {}\n  .rgb {}\n  .hsl {}\n  .okl {}\n\u003C\u002Fstyle>\n\u003Cdiv class='b hex'>\u003C\u002Fdiv>\u003Cdiv class='b rgb'>\u003C\u002Fdiv>\u003Cdiv class='b hsl'>\u003C\u002Fdiv>\u003Cdiv class='b okl'>\u003C\u002Fdiv>","All four boxes look the same blue.",{"id":154,"title":155,"slug":156,"prompt":157,"starter_code":158,"expected_output":159,"language":16,"order_index":12},106,"Build a Theme with color-mix()","theme-with-color-mix","Define --brand as a custom property on :root. Give the .btn the brand color as background. On hover, darken it using color-mix() with black (20%). Add a .soft box whose background is a 15% mix of the brand color with white.","\u003Cstyle>\n  \u002F* Write your CSS here *\u002F\n\u003C\u002Fstyle>\n\u003Cbutton class='btn'>Save\u003C\u002Fbutton>\n\u003Cdiv class='soft'>Soft brand box\u003C\u002Fdiv>","Button darkens on hover and the soft box shows a pale tint of the brand color.","2026-09-29T18:53:27+00:00",{"id":162,"slug":163,"title":164},94,"css-cascade-inheritance-important","Cascade, Inheritance & !important",{"id":166,"slug":167,"title":168},96,"css-backgrounds","CSS Backgrounds",{"data":170},[171,489],{"id":23,"name":15,"slug":172,"icon":5,"icon_url":5,"short_description":173,"meta_title":174,"meta_description":175,"og_image":176,"locale":177,"subcategories":178},"html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[179,203,239,263,338,372,386,414,438,454],{"id":23,"name":180,"slug":181,"order_index":23,"topics":182},"HTML Fundamentals & Setup","html-fundamentals-setup",[183,186,189,192,196,199],{"id":12,"title":184,"slug":185,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Editors & Environment Setup","html-editors-and-environment-setup",{"id":23,"title":187,"slug":188,"order_index":23,"cornerstone":52,"reading_time_minutes":23},"HTML Introduction & History","html-introduction-and-history",{"id":93,"title":190,"slug":191,"order_index":93,"cornerstone":52,"reading_time_minutes":12},"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":193,"title":194,"slug":195,"order_index":193,"cornerstone":52,"reading_time_minutes":12},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":51,"title":197,"slug":198,"order_index":51,"cornerstone":52,"reading_time_minutes":12},"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":200,"title":201,"slug":202,"order_index":200,"cornerstone":52,"reading_time_minutes":12},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":12,"name":204,"slug":205,"order_index":12,"topics":206},"Text & Content Basics","text-content-basics",[207,211,215,219,223,227,231,235],{"id":208,"title":209,"slug":210,"order_index":208,"cornerstone":52,"reading_time_minutes":12},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":212,"title":213,"slug":214,"order_index":212,"cornerstone":52,"reading_time_minutes":12},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":216,"title":217,"slug":218,"order_index":216,"cornerstone":52,"reading_time_minutes":23},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":220,"title":221,"slug":222,"order_index":220,"cornerstone":52,"reading_time_minutes":12},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":224,"title":225,"slug":226,"order_index":224,"cornerstone":52,"reading_time_minutes":12},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":228,"title":229,"slug":230,"order_index":228,"cornerstone":52,"reading_time_minutes":12},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":232,"title":233,"slug":234,"order_index":232,"cornerstone":52,"reading_time_minutes":12},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":236,"title":237,"slug":238,"order_index":236,"cornerstone":52,"reading_time_minutes":12},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":93,"name":240,"slug":241,"order_index":93,"topics":242},"Links, Media & Navigation","links-media-navigation",[243,247,251,255,259],{"id":244,"title":245,"slug":246,"order_index":244,"cornerstone":52,"reading_time_minutes":12},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":248,"title":249,"slug":250,"order_index":248,"cornerstone":52,"reading_time_minutes":12},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":252,"title":253,"slug":254,"order_index":252,"cornerstone":52,"reading_time_minutes":23},17,"HTML Favicon Setup","html-favicon-setup",{"id":256,"title":257,"slug":258,"order_index":256,"cornerstone":52,"reading_time_minutes":12},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":260,"title":261,"slug":262,"order_index":260,"cornerstone":52,"reading_time_minutes":12},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":193,"name":264,"slug":265,"order_index":193,"topics":266},"Structuring Content","structuring-content",[267,272,277,282,287,291,295,299,303,307,311,315,319,323,327,331,334],{"id":268,"title":269,"slug":270,"order_index":271,"cornerstone":52,"reading_time_minutes":12},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":273,"title":274,"slug":275,"order_index":276,"cornerstone":52,"reading_time_minutes":12},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":278,"title":279,"slug":280,"order_index":281,"cornerstone":52,"reading_time_minutes":12},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":283,"title":284,"slug":285,"order_index":286,"cornerstone":52,"reading_time_minutes":23},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":288,"title":289,"slug":290,"order_index":268,"cornerstone":52,"reading_time_minutes":12},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":292,"title":293,"slug":294,"order_index":273,"cornerstone":52,"reading_time_minutes":23},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":296,"title":297,"slug":298,"order_index":278,"cornerstone":52,"reading_time_minutes":12},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":300,"title":301,"slug":302,"order_index":283,"cornerstone":52,"reading_time_minutes":12},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":304,"title":305,"slug":306,"order_index":288,"cornerstone":52,"reading_time_minutes":12},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":308,"title":309,"slug":310,"order_index":292,"cornerstone":52,"reading_time_minutes":93},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":312,"title":313,"slug":314,"order_index":296,"cornerstone":52,"reading_time_minutes":12},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":316,"title":317,"slug":318,"order_index":300,"cornerstone":52,"reading_time_minutes":12},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":320,"title":321,"slug":322,"order_index":304,"cornerstone":52,"reading_time_minutes":23},77,"HTML Symbols","html-symbols",{"id":324,"title":325,"slug":326,"order_index":324,"cornerstone":52,"reading_time_minutes":23},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":328,"title":329,"slug":330,"order_index":328,"cornerstone":52,"reading_time_minutes":12},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":141,"title":332,"slug":333,"order_index":141,"cornerstone":52,"reading_time_minutes":23},"HTML URL Encoding Explained","html-url-encoding-explained",{"id":335,"title":336,"slug":337,"order_index":335,"cornerstone":52,"reading_time_minutes":23},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":208,"name":339,"slug":340,"order_index":51,"topics":341},"Forms & User Input","forms-user-input",[342,347,352,357,362,367],{"id":343,"title":344,"slug":345,"order_index":346,"cornerstone":52,"reading_time_minutes":12},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":348,"title":349,"slug":350,"order_index":351,"cornerstone":52,"reading_time_minutes":23},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":353,"title":354,"slug":355,"order_index":356,"cornerstone":52,"reading_time_minutes":23},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":358,"title":359,"slug":360,"order_index":361,"cornerstone":52,"reading_time_minutes":12},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":363,"title":364,"slug":365,"order_index":366,"cornerstone":52,"reading_time_minutes":12},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":368,"title":369,"slug":370,"order_index":371,"cornerstone":52,"reading_time_minutes":12},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":212,"name":373,"slug":374,"order_index":200,"topics":375},"Graphics & Visuals","graphics-visuals",[376,381],{"id":377,"title":378,"slug":379,"order_index":380,"cornerstone":52,"reading_time_minutes":93},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":382,"title":383,"slug":384,"order_index":385,"cornerstone":52,"reading_time_minutes":93},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":216,"name":387,"slug":388,"order_index":208,"topics":389},"Multimedia","multimedia",[390,395,400,405,410],{"id":391,"title":392,"slug":393,"order_index":394,"cornerstone":52,"reading_time_minutes":12},57,"HTML Media Overview","html-media-overview",45,{"id":396,"title":397,"slug":398,"order_index":399,"cornerstone":52,"reading_time_minutes":12},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":401,"title":402,"slug":403,"order_index":404,"cornerstone":52,"reading_time_minutes":12},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":406,"title":407,"slug":408,"order_index":409,"cornerstone":52,"reading_time_minutes":12},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":411,"title":412,"slug":413,"order_index":343,"cornerstone":52,"reading_time_minutes":12},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":220,"name":415,"slug":416,"order_index":212,"topics":417},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[418,422,426,430,434],{"id":419,"title":420,"slug":421,"order_index":348,"cornerstone":52,"reading_time_minutes":12},62,"HTML Geolocation API","html-geolocation-api",{"id":423,"title":424,"slug":425,"order_index":353,"cornerstone":52,"reading_time_minutes":12},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":427,"title":428,"slug":429,"order_index":358,"cornerstone":52,"reading_time_minutes":12},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":431,"title":432,"slug":433,"order_index":363,"cornerstone":52,"reading_time_minutes":12},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":435,"title":436,"slug":437,"order_index":368,"cornerstone":52,"reading_time_minutes":12},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":224,"name":439,"slug":440,"order_index":216,"topics":441},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[442,446,450],{"id":443,"title":444,"slug":445,"order_index":377,"cornerstone":52,"reading_time_minutes":12},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":447,"title":448,"slug":449,"order_index":382,"cornerstone":52,"reading_time_minutes":12},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":451,"title":452,"slug":453,"order_index":391,"cornerstone":52,"reading_time_minutes":12},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":228,"name":455,"slug":456,"order_index":220,"topics":457},"Reference & Practice","reference-practice",[458,461,465,469,473,477,481,485],{"id":144,"title":459,"slug":460,"order_index":23,"cornerstone":52,"reading_time_minutes":12},"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":462,"title":463,"slug":464,"order_index":12,"cornerstone":52,"reading_time_minutes":12},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":466,"title":467,"slug":468,"order_index":93,"cornerstone":52,"reading_time_minutes":12},72,"HTML Events Reference","html-events-reference",{"id":470,"title":471,"slug":472,"order_index":193,"cornerstone":52,"reading_time_minutes":12},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":474,"title":475,"slug":476,"order_index":51,"cornerstone":52,"reading_time_minutes":12},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":478,"title":479,"slug":480,"order_index":200,"cornerstone":52,"reading_time_minutes":12},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":482,"title":483,"slug":484,"order_index":208,"cornerstone":52,"reading_time_minutes":93},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":486,"title":487,"slug":488,"order_index":212,"cornerstone":52,"reading_time_minutes":23},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":12,"name":9,"slug":10,"icon":5,"icon_url":5,"short_description":490,"meta_title":491,"meta_description":492,"og_image":5,"locale":177,"subcategories":493},"Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[494,519,543],{"id":232,"name":495,"slug":496,"order_index":497,"topics":498},"CSS Fundamentals & Setup","css-fundamentals-setup",0,[499,503,507,511,515],{"id":500,"title":501,"slug":502,"order_index":23,"cornerstone":52,"reading_time_minutes":193},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":504,"title":505,"slug":506,"order_index":12,"cornerstone":52,"reading_time_minutes":193},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":508,"title":509,"slug":510,"order_index":93,"cornerstone":52,"reading_time_minutes":93},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":512,"title":513,"slug":514,"order_index":193,"cornerstone":52,"reading_time_minutes":93},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":516,"title":517,"slug":518,"order_index":51,"cornerstone":52,"reading_time_minutes":51},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":244,"name":43,"slug":44,"order_index":497,"topics":520},[521,522,523,527,531,535,539],{"id":37,"title":38,"slug":39,"order_index":236,"cornerstone":52,"reading_time_minutes":51},{"id":166,"title":168,"slug":167,"order_index":244,"cornerstone":52,"reading_time_minutes":193},{"id":524,"title":525,"slug":526,"order_index":248,"cornerstone":52,"reading_time_minutes":51},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":528,"title":529,"slug":530,"order_index":252,"cornerstone":52,"reading_time_minutes":51},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":532,"title":533,"slug":534,"order_index":256,"cornerstone":52,"reading_time_minutes":200},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":536,"title":537,"slug":538,"order_index":260,"cornerstone":52,"reading_time_minutes":51},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":540,"title":541,"slug":542,"order_index":271,"cornerstone":52,"reading_time_minutes":200},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":236,"name":544,"slug":545,"order_index":497,"topics":546},"Selectors & the Cascade","selectors-the-cascade",[547,551,555,559,563,567,571,575],{"id":548,"title":549,"slug":550,"order_index":200,"cornerstone":52,"reading_time_minutes":193},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":552,"title":553,"slug":554,"order_index":208,"cornerstone":52,"reading_time_minutes":193},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":556,"title":557,"slug":558,"order_index":212,"cornerstone":52,"reading_time_minutes":193},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":560,"title":561,"slug":562,"order_index":216,"cornerstone":52,"reading_time_minutes":200},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":564,"title":565,"slug":566,"order_index":220,"cornerstone":52,"reading_time_minutes":51},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":568,"title":569,"slug":570,"order_index":224,"cornerstone":52,"reading_time_minutes":51},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":572,"title":573,"slug":574,"order_index":228,"cornerstone":52,"reading_time_minutes":193},93,"CSS Specificity Explained","css-specificity-explained",{"id":162,"title":164,"slug":163,"order_index":232,"cornerstone":52,"reading_time_minutes":51}]