Colorful Options in Lighthouse

By GIC Published on April 30th, 2025

Last updated on April 30th, 2025

An image of the character Delly in the style of television artist Bob Ross; He has big puffy hair and a beard, and he is at an easel painting a scene with a Lighthouse. — “Let’s just add a happy little tree here by this beautiful ol’ lighthouse…”

It can be a challenge to inject a little color into a government website! Now try to do it while maintaining a common look and feel across an entire state of diverse departments, agencies, and commissions. It’s enough to send a person searching for unexpectedly captivating entertainment to zen out on!

One of the main benefits of Lighthouse is its calming and unifying visuals, instilling trust and establishing the authority that comes with being an official Delaware state government website.

But how do agencies maintain their individuality amid the similarities of a shared common look and feel?

Lighthouse to the rescue again! We are excited to introduce four new color palette options!

Why Color Choice Matters

But before we get specific, a word or two about the use of color in Lighthouse. Selecting the right colors isn’t just a style issue in today’s website design process, it’s a crucial part of maintaining accessibility. The wrong color choices can stop some visitors in their tracks before they can even access your website’s messaging.

Some color combinations can be difficult for some people to distinguish from one another. Did you know that it is estimated that 5% of all people are not able to distinguish between red and green! It’s also crucial to ensure sufficient contrast between text and backgrounds.

A color vision test, with three rows of five circles, each made up of smaller circles and with colors that can be difficult for some people to distinguish. In each circle, a number is spelled out. From top left to bottom, the numbers are 12, 8, 6, 29, 57, 5, 3, 15, 74, 5, 6, 57, 5, 42, 45. — Can you read all the numbers within each of these circles? An inability to distinguish between some colors highlights the need for thoughtfulness in website design.

Use of Color in Lighthouse

Our palettes are designed for optimal flexibility. To ensure cohesion across Delaware.gov sites, each collection is fashioned to innately apply to the proper components, making less work for you and more accessibility for your visitors.

Golden yellow diamonds will be a design element in all palettes, representing the three counties of Delaware. The foundational/base color is Pioneer Blue. All text will either be in Pioneer Blue or Charcoal Gray on a white background or vice versa

Our color palettes follow a logic that instantly optimizes the use of four accent colors throughout the design and ensures WCAG 2.1 AAA contrast compliancy.

Most block patterns/components will have Pioneer Blue as their base and then have additional color accents that decorate those block patterns. Those accents will be pulled from the color palette that each client chooses.

Accent Color 1: Used to contrast with white text.

Accent Color 2: Used for graphical objects/UI components, typically used for elements that act as controls or that can be interacted with.

Accent Color 3: Typically used for line breaks, strokes, borders and does not need to pass text/graphic WCAG standards.

Accent Color 4: Used to contrast with primary text color and Pioneer Blue text. And also used for component backgrounds, strokes, and borders.

Lighthouse Color Palettes

The Pioneer Palette

The Pioneer Palette is our introductory color scheme. We incorporated a gradient of our brand color, Pioneer Blue, for a calming and welcoming impression while evoking the essence of The First State. This palette is suitable for every Delaware agency, its hues of blues providing a classic and professional interface.

The First State Palette

A new take on an old favorite, The First State Palette pulls inspiration from the Delaware flag. The original stately colors have been reimagined for the modern age, providing an aesthetic foundation for your digital content. Like The Pioneer Palette, the color scheme of The First State palette establishes a professional appeal to your government website while providing users a sense of familiarity with classic Delawarean colors.

The Bellevue Bliss Palette

Like a breath of fresh air, The Bellevue Bliss Palette evokes the essence of Delaware’s parks. Complimenting the classic color scheme of blue and gold with a soft hue of green, The Bellevue Bliss Palette brings the outdoors into the digital sphere. Give your users a refreshing experience as they engage with your digital content and remind them of the natural beauty of The First State.

The Riverfront Blues Palette

An homage to the cultural epicenter of Wilmington, The Riverfront Blues Palette brings the charm of the culture and arts district to your government website. Inspire your users with the shades of blue pulled from the creative sector of the city while keeping them up to date on Delaware’s developing news.

A comparison of some of the accent colors found (from left to right) in: Pioneer, First State, Bellevue Bliss, and Riverfront Blues

A comparison of banners with diamond imagery and accent colors found (from top to bottom) in: Pioneer, First State, Bellevue Bliss, and Riverfront Blues

It’s worth noting that these are the early phases of color palettes and remain works in progress!

There may be additional color palettes added to Lighthouse, pending additional research and feedback. Speaking of which:

Calling all Feedback Partners!

We’re looking for developers and Delaware agency web staffers who would like to help us improve Lighthouse!

Lighthouse is now fully available to explore, and we invite developers and agency web editors to dig their hands into the sand and begin to envision their own new Lighthouse websites. This effort is about building a community to provide criticism, suggestions, and enthusiasm for this project.