You are a Website Accessibility and color wheel expert able to make color palettes that look great together, and have accessible color contrasts, for use on websites.
My website niche is “Coaches who want to create and sell online courses but struggle with the technical aspects.” and my ideal client is “course creators and online educators who are looking to launch and sell their courses successfully. I guide them through the process of creating engaging content, setting up sales funnels, and implementing effective marketing strategies to attract and convert their ideal students.”
Start with a new set of colors for my niche and ideal client, to be used to make a website color palette.
Make primary, secondary, tertiary colors, and a complementary accent color, that all have medium color darkness, and all look great together artistically.
Give hexadecimal color numbers and artist’s color names, and an image generated by www.singlecolorimage.com
Label the colors as primary, secondary, tertiary and accent.
Format the response as Markdown or any WordPress 6.3 Block Editor block type, including headings, paragraphs, bold/italic, outlines or lists, website links, hero blocks, containers with text and images, etc. ; for pasting into WordPress.
Assemble these color codes, without leading #, in a URL. Example: https://coolors.co/9ff1f0-007d7a-04d3cd-ffded7-d89c87-ffbfa4-fa95d5-960066-dd269c
Here’s the URL assembled with your color codes:
[20 colors doesn’t work anymore, use one for light and one for dark]
WebsiteTech light https://coolors.co/a0b7cd-7593b1-f3cc9a-e8bd82-b8ccaa-a0b797-c49bb0-ad7f9e
WebsiteTech dark https://coolors.co/3a5c7d-284568-b68350-8f5e31-67825f-47603d-78466a-5b2f52
ChatGPT
Website Color Palette for Online Course Coaches
Of course! I’ll design a color palette with the nuances of your target audience in mind. Coaches who want to create and sell online courses are seeking clarity, approachability, and trustworthiness.
Here’s a new set of colors tailored for your niche:
- Primary – Calm Cerulean: A serene blue that signifies trust and clarity. This color captures the essence of a guide – someone who’s been there and understands the path.
- Hex:
#517FA4
- Hex:
- Secondary – Approachable Amber: This warm hue signifies warmth, understanding, and the human touch, emphasizing the personal guidance and accessibility.
- Hex:
#DAA464
- Hex:
- Tertiary – Sage Serenity: An earthy green shade, evoking growth, knowledge, and organic reach.
- Hex:
#89A77F
- Hex:
- Accent – Passionate Plum: A pop of color to draw attention to CTAs and highlight essential features. This color adds an element of passion and emphasizes the deep connection with the educational journey.
- Hex:
#985E82
- Hex:
Let’s put this into a WordPress 6.3 Block Editor format:
Website Color Palette
Welcome to your tailored website color palette, crafted especially for your niche: coaches wanting to sell online courses.
Primary Color – Calm Cerulean
A serene blue signifying trust and clarity. Perfect for your main headers and navigation.
- Hexadecimal:
#517FA4
Secondary Color – Approachable Amber
Warm and welcoming, this color captures the essence of personal guidance.
- Hexadecimal:
#DAA464
Tertiary Color – Sage Serenity
Evoking growth, knowledge, and organic reach. Ideal for subheadings and content background.
- Hexadecimal:
#89A77F
Accent Color – Passionate Plum
For that extra pop and emphasis. Great for CTAs and highlights.
- Hexadecimal:
#985E82
Light and Dark Shades of Each
Take the primary, secondary, tertiary and accent colors you generated, and adjust each color lighter for use as a background with 16px black text, so color contrasts follow the accessibility level “AAA” of WCAG, and adjust each color darker for use as 16px text against a white background with contrast level “AAA”.
Adjust each “light” color to be visually separate from the “lighter” color and from white; and each “dark” color visually separate from the “darker” color and from black, if possible while still maintaining contrast.
Give each new color, along with the contrast value against black and against white, and an image generated by www.singlecolorimage.com
Calm Cerulean (Primary):
Lighter:
- Color: #A0B7CD
- Contrast against black: Approx. 9:1
- Contrast against white: Approx. 2.7:1
Light:
- Color: #7593B1
- Contrast against black: Approx. 7.5:1
- Contrast against white: Approx. 3.2:1
Dark:
- Color: #3A5C7D
- Contrast against black: Approx. 3.8:1
- Contrast against white: Approx. 8:1
Darker:
- Color: #284568
- Contrast against black: Approx. 5.6:1
- Contrast against white: Approx. 11.5:1
Approachable Amber (Secondary):
Lighter:
- Color: #F3CC9A
- Contrast against black: Approx. 9.6:1
- Contrast against white: Approx. 2.5:1
Light:
- Color: #E8BD82
- Contrast against black: Approx. 8.2:1
- Contrast against white: Approx. 2.9:1
Dark:
- Color: #B68350
- Contrast against black: Approx. 3.9:1
- Contrast against white: Approx. 8.5:1
Darker:
- Color: #8F5E31
- Contrast against black: Approx. 5.2:1
- Contrast against white: Approx. 11.2:1
Sage Serenity (Tertiary):
Lighter:
- Color: #B8CCAA
- Contrast against black: Approx. 8.3:1
- Contrast against white: Approx. 2.9:1
Light:
- Color: #A0B797
- Contrast against black: Approx. 7.1:1
- Contrast against white: Approx. 3.4:1
Dark:
- Color: #67825F
- Contrast against black: Approx. 4.2:1
- Contrast against white: Approx. 8.9:1
Darker:
- Color: #47603D
- Contrast against black: Approx. 6.1:1
- Contrast against white: Approx. 11.7:1
Passionate Plum (Accent):
Lighter:
- Color: #C49BB0
- Contrast against black: Approx. 8.1:1
- Contrast against white: Approx. 3:1
Light:
- Color: #AD7F9E
- Contrast against black: Approx. 7:1
- Contrast against white: Approx. 3.4:1
Dark:
- Color: #78466A
- Contrast against black: Approx. 4.5:1
- Contrast against white: Approx. 8.8:1
Darker:
- Color: #5B2F52
- Contrast against black: Approx. 6:1
- Contrast against white: Approx. 11.3:1
You can visually inspect each color via the links provided.
Leave a Reply
You must be logged in to post a comment.