Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →

menu_book Course Curriculum (Web Colors) expand_more

Basic Color Syntax

Named colors Hex colors Three-digit hex Eight-digit hex alpha rgb integer syntax rgb percentage syntax rgb modern space syntax rgba legacy syntax transparent keyword currentColor keyword

HSL & HWB

hsl syntax Hue angles Saturation Lightness HSL alpha hwb syntax HWB whiteness HWB blackness HWB alpha Hue wrapping

Modern Color Spaces

lab color lch color oklab color oklch color color display-p3 color srgb color rec2020 color a98-rgb color prophoto-rgb color xyz

Color Mixing & Contrast

color-mix in srgb color-mix in oklab Mix percentages Relative color syntax Light-dark function contrast-color concept WCAG contrast ratio Large text contrast Non-text contrast Avoid color-only meaning

Gradients

Linear gradient Gradient angle Color stops Hard color stops Repeating linear gradient Radial gradient Radial size keywords Conic gradient Repeating conic gradient Gradient interpolation space

Variables & Themes

CSS custom color property Theme token palette Dark mode media query Color scheme property Forced colors media query System colors Accent color Caret color Selection colors Placeholder colors

Blending & Filters

background-blend-mode mix-blend-mode filter brightness filter contrast filter saturate filter hue-rotate filter grayscale filter sepia opacity versus alpha color isolation property

SVG & Canvas Colors

SVG fill SVG stroke SVG currentColor SVG stop-color Canvas fillStyle color Canvas strokeStyle color Canvas gradient colors Canvas globalAlpha Color input element JavaScript computed color

Web Colors / SVG & Canvas Colors

Canvas gradient colors

Learn Canvas gradient colors in Web Colors with a focused explanation, a topic-specific example, edge guidance, and a mastery check.

12 min read • Advanced

colors-077.js

js

const ctx=canvas.getContext("2d");const g=ctx.createLinearGradient(0,0,200,0);g.addColorStop(0,"#2563eb");g.addColorStop(1,"#ec4899");ctx.fillStyle=g;ctx.fillRect(0,0,200,60);

What to watch

Content source & attribution

Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

Canvas gradient colors Mastery Check →

Canvas strokeStyle color

Canvas globalAlpha