Color palette
A selected set of colors intended for coordinated use in visual design or representation.
Design for Developers
A color palette, or color scheme, is a selected set of colors intended to be used together in a visual design.
- How it is used
- Guides visual hierarchy and user attention when applying color across websites and web applications.
- How deep it goes
- Explains color-wheel relationships, palette construction, ratios, accessibility checks, and a step-by-step landing-page application.
- Examples
- Uses monochromatic, complementary, analogous, triad, and split-complementary schemes plus a travel landing page.
- What you can do after
- Apply it by selecting base, accent, tint, shade, and neutral colors to guide attention while preserving readability.
Everyday Data Visualization
A color palette is a selected set of colors intended to work together in a visual design or visualization.
- How it is used
- Supports visualizations by distinguishing data, emphasizing information, and coordinating chart and interface elements.
- How deep it goes
- Explains palette categories, color-wheel schemes, generation methods, and practical refinement rather than prescribing a single formula.
- Examples
- Demonstrates color-wheel schemes, a sunset-derived palette, generated companion colors, and a hospitality dashboard palette.
- What you can do after
- Apply it by selecting, generating, refining, and checking palettes for clear and consistent visualizations.
Read how Everyday Data Visualization explains color palette →
Web Components in Action
Theming is the practice of defining and applying a coordinated visual style across an interface or component system.
- How it is used
- Applies coordinated colors and typography across isolated components and complete applications.
- How deep it goes
- Explains declaration, inheritance, consumption, and palette switching, while deferring a complete design-system styling mechanism.
- Examples
- Uses root variables, Workout Creator components, inherited Shadow DOM values, and a black-to-green palette change.
- What you can do after
- Apply it via CSS custom properties to coordinate and switch component colors across an application.
Classic Game Programming on the NES: Make your own retro video game
A graphics palette is a set of color values available for rendering graphical content.
- How it is used
- Uses palette tables to assign NES background and sprite colors, then updates them during rendering.
- How deep it goes
- Explains ROM definitions, RAM changes, and a 32-byte VRAM transfer loop; defers tile and sprite palette use.
- Examples
- Demonstrates a default 32-entry palette and swaps two tile-palette colors to flash score, lives, and a planet base.
- What you can do after
- Apply it by editing RAM palette entries and relying on the NMI update to change shared on-screen colors.
WordPress Power Toolkit: Harness AI to build next-level websites
A color scheme is a coordinated selection of colors applied to a website's visual design.
- How it is used
- Guides website planning by matching colors with audience expectations, site purpose, mood, and brand message.
- How deep it goes
- Explains psychological associations, gives themed examples, and outlines application areas, but stops short of detailed color theory.
- Examples
- Uses medical, Halloween, bridal, Christmas, banking, legal, recipe, and catering websites as palette examples.
- What you can do after
- Operate WordPress’s Appearance > Customize screen to adjust a theme’s color scheme and site colors.
Read how WordPress Power Toolkit: Harness AI to build next-level websites explains color palette →
Web Design Playground, Second Edition
A color scheme is a coordinated selection of colors used together in a visual design.
- How it is used
- Guides color choices for web-page backgrounds, text, accents, and project-specific visual moods.
- How deep it goes
- Explains harmony types, hue relationships, color roles, and calculator use, but stops short of detailed accessibility guidance.
- Examples
- Uses #ffc200, #77613c, a dark gallery background with off-white text, and calculator-generated schemes.
- What you can do after
- Apply it via the Color Scheme Calculator to select harmonious colors and translate them into HTML and CSS.
Read how Web Design Playground, Second Edition explains color palette →
Web Design Playground
A coordinated set of colors chosen to work together in a design.
- How it is used
- Organizes page colors to add contrast, emphasize content, and express a desired atmosphere.
- How deep it goes
- Explains palette size, color roles, mood, and complementary or monochrome selection without detailing CSS implementation.
- Examples
- Uses a #ffc200 split complementary scheme, a #77613c monochrome scheme, landing-page color roles, and a dark photo gallery.
- What you can do after
- Apply it via Palettable or a color-scheme calculator to choose coordinated colors for a page.
CSS in Depth, Second Edition
A color palette is a coordinated set of color values selected for use across an interface or visual design.
- How it is used
- Establishes consistent interface colors while translating a design mockup into maintainable CSS.
- How deep it goes
- Defines palette composition and demonstrates CSS custom-property implementation, while stopping short of a complete color-selection methodology.
- Examples
- Uses branded greens, grays, white, navigation states, buttons, page backgrounds, tiles, and a less vivid active-link color.
- What you can do after
- Apply it via CSS custom properties to reuse colors consistently and update palette values centrally.
Read how CSS in Depth, Second Edition explains color palette →
Build a Website with ChatGPT
A color scheme is a coordinated selection of colors used for the visual design of a web page or website.
- How it is used
- Uses coordinated colors to improve a personal homepage’s visual appeal, readability, and design consistency.
- How deep it goes
- Defines color and background-color, demonstrates keyword values, addresses contrast, and stops short of advanced color systems.
- Examples
- Uses darkblue and lavender declarations, a dodgerblue-led palette, and a personal-homepage design prompt.
- What you can do after
- Build it from scratch by selecting CSS keyword colors, checking contrast, and assigning the palette in generated page styles.
Read how Build a Website with ChatGPT explains color palette →
Pro Angular 16
A color palette is a defined collection of colors from which interface colors are selected.
- How it is used
- Uses named color roles to style Angular Material components and keep custom components visually consistent.
- How deep it goes
- Defines base palettes and demonstrates Sass-based color and contrast retrieval, while deferring broader theme customization to documentation and package source.
- Examples
- Demonstrates indigo, pink, and red palettes in custom buttons and primary or accent colors on a toolbar and badge.
- What you can do after
- Build it from scratch with Angular Material Sass by defining palettes and applying generated colors to custom component states.
Tiny CSS Projects
The SMACSS theme category contains styles defining the visual look and feel of a page or project.
- How it is used
- Defines a consistent visual theme for controls, text, borders, and branded interface elements across layouts.
- How deep it goes
- Explains palette roles, inheritance, responsive stability, and a gradient-border implementation, stopping short of formal color-system design.
- Examples
- Uses a responsive newspaper theme, checkout controls, and a primary-to-accent gradient on text-input borders.
- What you can do after
- Apply it via CSS by defining reusable theme colors and using them consistently across controls, text, borders, and layouts.
Related concepts
- coloruses · Color is a visual property or representation characterized by attributes such as hue, lightness, saturation, or component values.
- monochrome color schemeincludes · A monochrome color scheme is a coordinated palette built from variations of a single color or hue.
- OKLCHuses · OKLCH is a perceptually uniform cylindrical color space representing color by lightness, chroma, and hue.
- sequential colormapincludes · A sequential colormap maps ordered quantitative values to a progressive change in color lightness, intensity, or saturation.
- CSS variableuses · A CSS custom property is an author-defined property, typically named with a leading double hyphen, whose value can be inherited and referenced in other declarations.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.