THE WORKBENCH / Brighter Workshop

Pattern Studio

Explore repeatable two-color patterns with scale controls and downloadable CSS and PNG output.

Make a repeat.

Pattern

Marks: #5c7054

Background: #f2ebd9

Repeat tile: 24 CSS px

The PNG uses the same numeric scale in image pixels. It exports a 1024 × 768 image.

Try a palette and rhythm.

Presets are illustrative design starting points. A pattern is not a contrast or accessibility certification.

A pattern with room to play.

See the CSS

/* Brighter Workshop: dots, repeat tile 24px */
.pattern {
  background-color: #f2ebd9;
  background-image: radial-gradient(circle at 50% 50%, #5c7054 0 3.3600000000000003px, transparent 3.3600000000000003px);
  background-size: 24px 24px;
}