The color brown

[Koepel]

The HTML code for "Brown" is #A52A2A according to this reference: https://www.w3schools.com/colors/colors_names.asp

That is indeed brown, unless it is a small band on a resistor or a thin wire, then it looks more like a eggplant (aubergine) color. After I mentioned this, the resistor band color was changed from 'brown' to '#8b4513' in commit: https://github.com/wokwi/wokwi-elements/commit/1aaedde723256a8e2e0ca9127598ad81ee605542

At Wikipedia Electronic color code they use the code '#964B00' in the table. However, most of my resistors have a darker brown. Wikipedia uses that same value also in the page List of colors (compact). But then they use #88540B in the page List of colors: A–F.

I suppose that no one knows what brown is. Perhaps Wokwi can tune the colors here and there for a better look.

The brown wire is not brown enough. Can the bands on the resistors be a little wider ? A gray band is not well visible. The yellow and white resistor bands are too bright. The gold is too dim when compared to yellow, orange and white bands. The red resistor band might be slightly too bright, making it go in the direction of orange. Red paint in real life is not that red.

The colors of my monitor are decent, but not color accurate.

[urish]

Thank you for looking into this!

I suppose that no one knows what brown is. Perhaps Wokwi can tune the colors here and there for a better look.

Mind coming up with specific suggestions for colors? I'm afraid I have no idea how to come up with better colors than what Wikipedia has.

Can the bands on the resistors be a little wider ? A gray band is not well visible.

Shouldn't be a problem. @AriellaE can you please look into this?

[Koepel]

Firefox seems to change the colors by default. In about:config set the "gfx.color_management.mode" to 0, and restart Firefox.

The next pictures are made with ImageMagick: convert -size 250x75 canvas:#a52a2a brown.png

HTML Brown #A52A2A

New resistor band brown #8b4513

Wikipedia Electronic color code brown #964B00

Wikipedia brown in list of colors #88540B

These are the resistor band colors at this moment.

[urish]

I never realized brown was such a complicated thing :)

So which one do you think is the most accurate?

These are the resistor band colors at this moment.

I also see that the wire position is a bit off, let's see if I can fix that as well

[Koepel]

I'm trying the colors on different displays. I don't have a complete suggestion yet.

[Koepel]

These are my suggestions.

Color of wires

No change. Stay with the HTML standard. If someone wants a better brown, then "SaddleBrown" can be used for a wire.

Shape of color bands of resistors

Color bands wider. For example 20% or more. Distance between gold band and the other bands wider, for example 25% wider or more.

Colors of the color bands

The suggested colors are an average for a good display and for a cheap LCD monitor from different angles.

The picture below has three columns. Note that there is also a row with 'White' at the bottom. First column: the HTML standard. Second column: colors at this moment. Third column: my suggestions.

The code for: https://github.com/wokwi/wokwi-elements/blob/master/src/resistor-element.ts

const bandColors: { [key: number]: string } = {
  [-2]: '#C3C7C0',  // Silver
  [-1]: '#F1D863', // Gold
  0: '#000000',    // Black
  1: '#8F4814',  // Brown
  2: '#FB0000',  // Red
  3: '#FC9700',  // Orange
  4: '#FCF800',  // Yellow
  5: '#00B800',  // Green
  6: '#0000FF',  // Blue
  7: '#A803D6',  // Violet
  8: '#808080',  // Gray
  9: '#FCFCFC',  // White
};

The script that I used for ImageMagick to make a single row of colors:

convert -size 80x40 canvas:#C3C7C0 x-2.png
convert -size 80x40 canvas:#F1D863 x-1.png
convert -size 80x40 canvas:#000000 x0.png
convert -size 80x40 canvas:#8F4814 x1.png
convert -size 80x40 canvas:#FB0000 x2.png
convert -size 80x40 canvas:#FC9700 x3.png
convert -size 80x40 canvas:#FCF800 x4.png
convert -size 80x40 canvas:#00B800 x5.png
convert -size 80x40 canvas:#0000FF x6.png
convert -size 80x40 canvas:#A803D6 x7.png
convert -size 80x40 canvas:#808080 x8.png
convert -size 80x40 canvas:#FCFCFC x9.png
convert -append x-2.png x-1.png x0.png x1.png x2.png x3.png x4.png x5.png x6.png x7.png x8.png x9.png x.png

Future enhancements

• Add a shiny gloss and perhaps also a grain to the gold and silver resistor band.
• When a color for a wire can be selected from a menu, then it might be appropriate to have other (better) colors.
• Be able to choose a 5-band 1% metalfilm resistor.

[Koepel]

There are still a few issues with the resistor:

• The two middle bands are now wider, but the two outer bands are not. That is visually unpleasant.
• There is no wider gap between the tolerance band and the rest.
• The new gold color is not used for the 5% tolerance band. That has a fixed value of #C4A000 instead of using [-1] from the table. The gold from the table is correctly used for the third band when the resistor value is between 1 and 10Ω.
• Resistor values between 0.1Ω and 10Ω are not correct when a whole number is used. For example "4.7" Ω is correct, but "4.0" or "4" is not. For example from the E12 series, the 1Ω and 0.1Ω are not correct.

[urish]

Thanks for the feedback! Any guidance regarding the tolerance band gap?

[Koepel]

As I wrote before, 25% (or more) distance than between the other bands. From 25% (or more) it is visually easy recognizable as a wider gap.