Member Avatar for asmith3006

Hi.
Is it possible to fill a rectangle with a ratio of colour, for example fill a rectangle with 50% red so it's pale red?

I want to be able to specify the shade of colour in a number form if possible.

So far I've only found linear gradiants which aren't much use to me :confused:

Thanks for any and all help.

Andrew.

  • 2 Contributors
  • 4 Replies
  • 118 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Lord Soth

Dani AI

Generated

— two different things people mean by "50% red," and the right technique depends on which you want.

One approach is transparency: draw full red and make it semi‑transparent so the page behind shows through. In CSS that is rgba() / hsla() (alpha channel) or the opacity property. The other approach is to compute a lighter (paler) red that looks the same on any background by mixing red with white — you can do that with HSL (raise lightness), the newer color-mix() function, or by computing RGB values yourself.

Practical CSS examples:

/* semi-transparent (composited with whatever is behind the box) */
.box { background-color: rgba(255, 0, 0, 0.5); }

/* pale red independent of background (increase lightness) */
.box-pale { background-color: hsl(0, 100%, 70%); }

/* color-mix (modern browsers) */
.box-mix { background-color: color-mix(in srgb, red 50%, white); }

Note the difference: rgba(255,0,0,0.5) over a white background produces the same pixels as a 50/50 mix with white (about rgb(255,128,128) / #FF8080), but over a darker background it will look different. If you want a predictable numerical "shade" value regardless of what's behind the element, mix with white (HSL or color-mix) or compute the RGB mix yourself using the formula:

result = round((1 - t) base + t 255) where t is fraction of white (0.5 for 50%).

If you are working in .NET/GDI+ (as suggested), use the ARGB constructor to set alpha for transparency; for web work prefer the CSS methods above. Further reading: CSS color functions and opacity on MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/color and https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) and the color-mix spec (https://www.w3.org/TR/css-color-4/#the-color-mix-function).

Recommended Answers

All 4 Replies

Member Avatar for asmith3006

I REALLY need some help on this please. Any suggestions?

Member Avatar for Lord Soth

Hi,

If you are using System.Drawing (GDI+), you can use "System.Drawing.Color.FromArgb(Int32, Int32, Int32)".

Loren Soth

Member Avatar for asmith3006

So I'd have to work out the RGB values for the colour and the shade of colour? :S

Isn't there a nice and simple "transparancy" option? :(

Thanks for the help :)

Member Avatar for Lord Soth

Hi,

I am not sure but the four parametered version of the FromArgb takes Alpha Red Green Blue (where Alpha is opacity/trasnparency) but still you must adjust the GDI+'s brush or copy mode I guess.

Loren Soth

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.