• in
InterCourses
CoursesBlogs
0
← CSS
○CSS Rule Demo: Style an Exhibit Card○Exercise: Write Your First CSS Rule○CSS Selectors Demo: Target Exhibit Details○Exercise: Target Exhibit Details○Apply CSS Demo: Three Sources○Exercise: Apply CSS Three Ways○Specificity Demo: Resolve a Style Conflict○Exercise: Resolve Specificity✦Module Quiz
●Color Palette Demo○Color Palette Exercise○Background Layer Demo○Background Layer Exercise○Type Rhythm Demo○Type Rhythm Exercise○Borders and Shadows Demo○Exercise: Borders and Shadows✦Module Quiz
○Box Model Demo: Seed Packet Card○Exercise: Space a Seed Packet○Display Demo: Swap Table Labels○Exercise: Arrange Swap Table Labels○Positioning Demo: Pickup Pin○Exercise: Pin the Pickup Location○Sizing and Overflow Demo○Exercise: Size a Seed-Swap Notice✦Module Quiz
○Advanced Selectors Demo: Book Cart Sign○Exercise: Target a Book Cart Sign○Pseudo-Classes Demo: Night Cart States○Exercise: Style Night Cart States○Pseudo-Elements Demo○Exercise: Add a Book-Quote Mark
○Lantern Market navigation demo○Lantern Market navigation exercise
○Community garden request card demo○Community garden request card exercise
○Flex Direction Demo○Exercise: Flex Direction○Main-Axis Spacing Demo○Exercise: Main-Axis Spacing○Cross-Axis Alignment Demo○Exercise: Cross-Axis Alignment○Wrapping and Flex Items Demo○Exercise: Wrapping and Flex Items○Flexbox Navigation Demo○Exercise: Flexbox Navigation
○Grid Tracks Demo○Exercise: Grid Tracks○Grid Gaps Demo○Exercise: Grid Gaps○Grid Placement Demo○Exercise: Grid Placement○Responsive Grid Demo○Exercise: Responsive Grid
○River radio schedule demo○River radio schedule exercise
○Field note color system demo○Field note color system exercise○Transforms Demo○Exercise: Rotate a Field Note
○Kite festival signal demo○Kite festival signal exercise
○Garden forecast demo○Harbor forecast exercise○Fluid sizing demo○Fluid weather bulletin exercise✦Module Quiz
○Seed inventory table demo○Tool checkout table exercise✦Module Quiz
○Community maker profile demo○Maker profile sheet exercise✦Module Quiz

Color Palette Demo

The Tideglass exhibits are behind you; this module styles a separate Lantern Lane Night Market flyer. Its small palette makes the title, details, and callout easy to scan.

The demo already supplies sizing and centering rules. You will learn layout later; for now, focus on the color declarations.

In style.css, notice the selector, property, and value in rules such as .flyer { background-color: #172554; }. The selector chooses the flyer, background-color chooses what to paint, and #172554 is the deep-blue value.

Visible checkpoint

Run the preview. The cream title should stand out from the blue panel, while the coral badge should be the first small detail your eye finds.

Try it safely

Change the .badge background-color value to another valid color, run the preview, and observe how the emphasis changes. Restore #fb7185 before continuing to the exercise.

Next, rebuild a smaller palette yourself in Color Palette Exercise.

Learn more

MDN’s official documentation shows the many valid ways to set text color, including named colors, hex values, rgb(), and hsl(). Read MDN’s reference for the color CSS property when you want to go further.

Hint 1
1 / 1
HINT 1

Find the selector that matches the part of the flyer you want to recolor.

Loading editor…
READY
intercourses
html