Member Avatar for garyjohnson

Hello, I have been trying everyhting and I still have not gotten any good results for my cholor sheme. I need the scheme to go well with yellow, green, and red. I know random colors that dont really go well together. But Ive tried black but it makes my site look to intemidating. Does anyone have any good ideas?

  • 3 Contributors
  • 2 Replies
  • 133 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by pritaeas

Dani AI

Generated

raised a common issue: three bright hues (yellow, green, red) can fight for attention. Replies from @M/ and point toward balance and tooling. The practical approach below turns that advice into repeatable steps and gives quick checks to keep the site friendly and usable over time.

Start by assigning roles and proportions (a simple 60/30/10 rule works well): one color becomes the dominant brand/structure color (60%), a second covers surfaces and secondary controls (30%), and the third is a sparing accent for CTAs or alerts (10%). Desaturate or shift the supporting tones toward softer tints for large areas so the brightest hue only appears in small, meaningful places. Reserve the strongest contrast (dark text on lighter tints or light text on a darker tint) for legibility.

Use CSS variables to keep the system consistent and easy to tweak. Example setup:

:root {
  --bg: hsl(210,10%,96%);
  --primary: hsl(120,35%,36%);   /* main green */
  --muted-yellow: hsl(48,60%,70%);/* soft yellow for surfaces */
  --cta-red: hsl(0,65%,45%);      /* small-area accent */
}
body { background: var(--bg); color: hsl(210,10%,12%); }
.btn-cta { background: var(--cta-red); color: #fff; }
.panel { background: var(--muted-yellow); }

Check accessibility and color-blind friendliness early. Verify contrast ratios against WCAG thresholds and simulate common color deficiencies. Useful, reliable tools: the WebAIM contrast checker and the W3C WCAG quick reference for target ratios, plus a color-blindness simulator to ensure actions don’t rely on hue alone.

If the composition still feels “loud,” pick one of the three colors to live mainly in imagery or logos rather than the UI, reduce overall saturation, and use borders, icons, or text labels to convey meaning instead of color alone.

Recommended Answers

All 2 Replies

Member Avatar for <M/>

Well, have you tried white or a peach color that is very lightly browned? Or how about grey?

What is the theme/purpose of your site? If not a link to the page? If yellow, green, and red (i think it is for your logo right?) don't go well together you may have to remove red (it is hard to work with based off of the 3, that is if you work with all 3). But you could adjust the depths of the colors. Make yellow bright, red being dark, and green being neutral.

Member Avatar for pritaeas

Here is a thread containing several tools to help you decide.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.