Defining Custom color names?

[LekoFraggle]

Hello,

I am putting the final touches on my application, and one of the areas in which I struggle a bit is color theory.  I currently found a palette I think I like, but I may need to tweak it a bit.  

Anyway, my application has multiple virtual tile lists.  They each have a different color, so I need to set the color for each entry in the svg.

I would like to define my own color so I can write `fill="notProficient"` instead of fill=`red`

Edit: using the id does work, but it would be nice to do it the other way if that is possible.

Because it is a virtual list, both the class and the id are already being used (I may be able to use the id, but I feel defining it as a string would be cleaner).

Is this possible to do in CSS?  I know in the Android world, there is a separate file where you can define color constants for a project.

[LekoFraggle]

Replying to my own message because my edits do not seem to be taking.  

So, it seems using the id does work.  Here is an example.

#my-pool3 {fill:"#de6449"} /*red*/

However, it would be nice if the other way worked instead.  I know, this does seem like another OOP paradigm.  In addition, I am aware I should probably rename the my-pool from the example text to something more helpful. 

[morningReign]

---

@LekoFraggle wrote:

Hello,

I am putting the final touches on my application, and one of the areas in which I struggle a bit is color theory.  I currently found a palette I think I like, but I may need to tweak it a bit.  

Anyway, my application has multiple virtual tile lists.  They each have a different color, so I need to set the color for each entry in the svg.

I would like to define my own color so I can write `fill="notProficient"` instead of fill=`red`

Edit: using the id does work, but it would be nice to do it the other way if that is possible.

Because it is a virtual list, both the class and the id are already being used (I may be able to use the id, but I feel defining it as a string would be cleaner).

Is this possible to do in CSS?  I know in the Android world, there is a separate file where you can define color constants for a project.

---

Personally, generally,... I use associative arrays (actually objects) and set the fill values using the javaScript code

However,...

You could use classes:

.notProficient text{fill:#ff0000;}
.maybeOkay text{fill:#ffff00;}
.perfect text{fill:#00ff00;}

    <svg id="sHR" class="notProficient" x="100%-24" y="2">
      <text  id="txHR"  display="inherit" font-size="27" text-anchor="end" ></text>
      <text  id="txRHR" display="inherit" font-size="22" text-anchor="end" ></text>
    </svg>

[LekoFraggle]

Thank you.  I am using an associative array actually, but when I tried to use it to assign color values, it worked on the first run of the program, but I have a tumbler where the teacher can set the scale of one column.  When that was pushed, it broke everything (the list would be drawn twice in two different colors).

So, I had to be very diligent about how to define the multiple colors.  It ended up that using the ids was the key.  The class did not work because it seemed that the class had to be "tile-list-item"

That is okay though, using the id does work. It is almost the same as the class, but instead of...

.notProficient text{fill:#ff0000;}

I use

#notProficient text{fill:#ff0000;}

Thank you.

[morningReign]

---

@LekoFraggle wrote:

Thank you.  I am using an associative array actually, but when I tried to use it to assign color values, it worked on the first run of the program, but I have a tumbler where the teacher can set the scale of one column.  When that was pushed, it broke everything (the list would be drawn twice in two different colors).

...

Hey,... There is another bit of weirdness when setting colors from javaScript; it works better when you convert the text hex constants (ex "#ffffff") to their numerical equivalents (ex 16777215)

For example, the fill parameter from an arc in the gui

<arc x="-1" id="iLon" height="130" arc-width="1" sweep-angle="180" fill="#ffffff" opacity="0.4"/>​

is set in javaScript with

document.getElementById('iLon').style.fill = 16777215

[LekoFraggle]

Thanks.  That is odd, but I guess on some level it makes sense.  It could be taking one step away from the runtime engine.

Cool.

[Sergius · Accepted solution]

You can apply multiple classes, just split them with spaces

`<element class="c1 c2 c3" />`

So you can mix the virtual tile list classes with your own ones

[morningReign]

---

@Sergius wrote:

You can apply multiple classes, just split them with spaces

`<element class="c1 c2 c3" />`

So you can mix the virtual tile list classes with your own ones

---

That,...

is Very cool.

[LekoFraggle]

Ditto.  I had no idea.  That is incredibly cool.