Use floats mathed from 8-bit values in basic color palette (#12323)

# Objective

Addresses one of the side-notes in #12225.

Colors in the `basic` palette are inconsistent in a few ways:
- `CYAN` was named `AQUA` in the referenced spec. (an alias was added in
a later spec)
- Colors are defined with e.g. "half green" having a `g` value of `0.5`.
But any spec would have been based on 8-bit color, so `0x80 / 0xFF` or
`128 / 255` or ~`0.502`. This precision is likely meaningful when doing
color math/rounding.

## Solution

Regenerate the colors from
https://play.rust-lang.org/?version=stable&mode=debug&edition=2021&gist=37563bedc8858033bd8b8380328c5230

crates/bevy_color/src/palettes/basic.rs

@@ -1,39 +1,39 @@
 //! Named colors from the CSS1 specification, also known as
 //! [basic colors](https://en.wikipedia.org/wiki/Web_colors#Basic_colors).
 //! This is the same set of colors used in the
-//! [VGA graphcs standard](https://en.wikipedia.org/wiki/Video_Graphics_Array).
+//! [VGA graphics standard](https://en.wikipedia.org/wiki/Video_Graphics_Array).
 
 use crate::Srgba;
 
-/// <div style="background-color:rgb(0%, 0%, 0%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const BLACK: Srgba = Srgba::new(0.0, 0.0, 0.0, 1.0);
-/// <div style="background-color:rgb(0%, 0%, 100%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const BLUE: Srgba = Srgba::new(0.0, 0.0, 1.0, 1.0);
-/// <div style="background-color:rgb(0%, 100%, 100%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const CYAN: Srgba = Srgba::new(0.0, 1.0, 1.0, 1.0);
-/// <div style="background-color:rgb(100%, 0%, 100%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const FUCHSIA: Srgba = Srgba::new(1.0, 0.0, 1.0, 1.0);
-/// <div style="background-color:rgb(50%, 50%, 50%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const GRAY: Srgba = Srgba::new(0.5, 0.5, 0.5, 1.0);
-/// <div style="background-color:rgb(0%, 50%, 0%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const GREEN: Srgba = Srgba::new(0.0, 0.5, 0.0, 1.0);
-/// <div style="background-color:rgb(0%, 100%, 0%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const LIME: Srgba = Srgba::new(0.0, 1.0, 0.0, 1.0);
-/// <div style="background-color:rgb(50%, 0%, 0%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const MAROON: Srgba = Srgba::new(0.5, 0.0, 0.0, 1.0);
-/// <div style="background-color:rgb(0%, 0%, 50%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const NAVY: Srgba = Srgba::new(0.0, 0.0, 0.5, 1.0);
-/// <div style="background-color:rgb(50%, 50%, 0%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const OLIVE: Srgba = Srgba::new(0.5, 0.5, 0.0, 1.0);
-/// <div style="background-color:rgb(50%, 0%, 50%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const PURPLE: Srgba = Srgba::new(0.5, 0.0, 0.5, 1.0);
-/// <div style="background-color:rgb(100%, 0%, 0%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const RED: Srgba = Srgba::new(1.0, 0.0, 0.0, 1.0);
-/// <div style="background-color:rgb(75%, 75%, 75%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const SILVER: Srgba = Srgba::new(0.75, 0.75, 0.75, 1.0);
-/// <div style="background-color:rgb(0%, 50%, 50%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const TEAL: Srgba = Srgba::new(0.0, 0.5, 0.5, 1.0);
-/// <div style="background-color:rgb(100%, 100%, 100%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const WHITE: Srgba = Srgba::new(1.0, 1.0, 1.0, 1.0);
-/// <div style="background-color:rgb(100%, 100%, 0%); width: 10px; padding: 10px; border: 1px solid;"></div>
-pub const YELLOW: Srgba = Srgba::new(1.0, 1.0, 0.0, 1.0);
+/// <div style="background-color: #00FFFF; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const AQUA: Srgba = Srgba::rgb(0.0, 1.0, 1.0);
+/// <div style="background-color: #000000; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const BLACK: Srgba = Srgba::rgb(0.0, 0.0, 0.0);
+/// <div style="background-color: #0000FF; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const BLUE: Srgba = Srgba::rgb(0.0, 0.0, 1.0);
+/// <div style="background-color: #FF00FF; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const FUCHSIA: Srgba = Srgba::rgb(1.0, 0.0, 1.0);
+/// <div style="background-color: #808080; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const GRAY: Srgba = Srgba::rgb(0.5019608, 0.5019608, 0.5019608);
+/// <div style="background-color: #008000; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const GREEN: Srgba = Srgba::rgb(0.0, 0.5019608, 0.0);
+/// <div style="background-color: #00FF00; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const LIME: Srgba = Srgba::rgb(0.0, 1.0, 0.0);
+/// <div style="background-color: #800000; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const MAROON: Srgba = Srgba::rgb(0.5019608, 0.0, 0.0);
+/// <div style="background-color: #000080; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const NAVY: Srgba = Srgba::rgb(0.0, 0.0, 0.5019608);
+/// <div style="background-color: #808000; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const OLIVE: Srgba = Srgba::rgb(0.5019608, 0.5019608, 0.0);
+/// <div style="background-color: #800080; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const PURPLE: Srgba = Srgba::rgb(0.5019608, 0.0, 0.5019608);
+/// <div style="background-color: #FF0000; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const RED: Srgba = Srgba::rgb(1.0, 0.0, 0.0);
+/// <div style="background-color: #C0C0C0; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const SILVER: Srgba = Srgba::rgb(0.7529412, 0.7529412, 0.7529412);
+/// <div style="background-color: #008080; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const TEAL: Srgba = Srgba::rgb(0.0, 0.5019608, 0.5019608);
+/// <div style="background-color: #FFFFFF; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const WHITE: Srgba = Srgba::rgb(1.0, 1.0, 1.0);
+/// <div style="background-color: #FFFF00; width: 10px; padding: 10px; border: 1px solid;"></div>
+pub const YELLOW: Srgba = Srgba::rgb(1.0, 1.0, 0.0);

examples/2d/bounding_2d.rs

@@ -177,7 +177,7 @@ fn update_volumes(
 
 fn render_volumes(mut gizmos: Gizmos, query: Query<(&CurrentVolume, &Intersects)>) {
     for (volume, intersects) in query.iter() {
-        let color = if **intersects { CYAN } else { ORANGE_RED };
+        let color = if **intersects { AQUA } else { ORANGE_RED };
         match volume {
             CurrentVolume::Aabb(a) => {
                 gizmos.rect_2d(a.center(), 0., a.half_size() * 2., color);

examples/stress_tests/bevymark.rs

@@ -254,13 +254,13 @@ fn setup(
             c.spawn((
                 TextBundle::from_sections([
                     text_section(GREEN, "Bird Count: "),
-                    text_section(CYAN, ""),
+                    text_section(AQUA, ""),
                     text_section(GREEN, "\nFPS (raw): "),
-                    text_section(CYAN, ""),
+                    text_section(AQUA, ""),
                     text_section(GREEN, "\nFPS (SMA): "),
-                    text_section(CYAN, ""),
+                    text_section(AQUA, ""),
                     text_section(GREEN, "\nFPS (EMA): "),
-                    text_section(CYAN, ""),
+                    text_section(AQUA, ""),
                 ]),
                 StatsText,
             ));

examples/ui/grid.rs

@@ -100,15 +100,15 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
                     item_rect(builder, BISQUE);
                     item_rect(builder, BLUE);
                     item_rect(builder, CRIMSON);
-        item_rect(builder, CYAN);
+                    item_rect(builder, AQUA);
                     item_rect(builder, ORANGE_RED);
                     item_rect(builder, DARK_GREEN);
                     item_rect(builder, FUCHSIA);
-        item_rect(builder, TEAL);
+                    item_rect(builder, TEAL);
                     item_rect(builder, ALICE_BLUE);
                     item_rect(builder, CRIMSON);
                     item_rect(builder, ANTIQUE_WHITE);
-        item_rect(builder, YELLOW);
+                    item_rect(builder, YELLOW);
                     item_rect(builder, PINK);
                     item_rect(builder, YELLOW_GREEN);
                     item_rect(builder, SALMON);

examples/ui/viewport_debug.rs

@@ -7,7 +7,7 @@
 use bevy::{color::palettes::css::*, prelude::*};
 
 const PALETTE: [Srgba; 10] = [
-    RED, YELLOW, WHITE, BEIGE, CYAN, CRIMSON, NAVY, AZURE, GREEN, BLACK,
+    RED, YELLOW, WHITE, BEIGE, AQUA, CRIMSON, NAVY, AZURE, GREEN, BLACK,
 ];
 
 #[derive(Component, Default, PartialEq)]