Now, I'm not sure:

Reference: https://www.colorhexa.com/000000-to-ffffff
Both groups of squares represent values from black outside to white inside (with a 0.25 step change). Left is linear RGB. Right is non-linear sRGB. The right-hand looks most correct in terms of interpolation, which I think you can see with the 25% white square: for linear there is a sharp contrast between 0% and 25% white, for sRGB it is much closer.

show code

use bevy::prelude::*;

fn main() {
    App::build()
        .add_plugins(DefaultPlugins)
        .insert_resource(ClearColor(Color::BLUE))
        .add_startup_system(setup.system())
        .run();
}

#[derive(Bundle, Default)]
struct MinimalBundle {
    transform: Transform,
    global_transform: GlobalTransform,
}

fn setup(mut materials: ResMut<Assets<ColorMaterial>>, commands: &mut Commands) {
    let color0 = Color::BLACK;
    let color1 = Color::WHITE;
    commands
        .spawn(OrthographicCameraBundle::new_2d())
        .spawn(MinimalBundle {
            transform: Transform::from_translation(Vec3::new(-200., 0., 0.)),
            ..Default::default()
        })
        .with_children(|parent| {
            parent
                .spawn(SpriteBundle {
                    sprite: Sprite {
                        size: Vec2::splat(250.),
                        ..Default::default()
                    },
                    material: materials.add(lerp_linear(color0, color1, 0.).into()),
                    ..Default::default()
                })
                .spawn(SpriteBundle {
                    sprite: Sprite {
                        size: Vec2::splat(200.),
                        ..Default::default()
                    },
                    material: materials.add(lerp_linear(color0, color1, 0.25).into()),
                    ..Default::default()
                })
                .spawn(SpriteBundle {
                    sprite: Sprite {
                        size: Vec2::splat(150.),
                        ..Default::default()
                    },
                    material: materials.add(lerp_linear(color0, color1, 0.5).into()),
                    ..Default::default()
                })
                .spawn(SpriteBundle {
                    sprite: Sprite {
                        size: Vec2::splat(100.),
                        ..Default::default()
                    },
                    material: materials.add(lerp_linear(color0, color1, 0.75).into()),
                    ..Default::default()
                })
                .spawn(SpriteBundle {
                    sprite: Sprite {
                        size: Vec2::splat(50.),
                        ..Default::default()
                    },
                    material: materials.add(lerp_linear(color0, color1, 1.).into()),
                    ..Default::default()
                });
        })
        .spawn(MinimalBundle {
            transform: Transform::from_translation(Vec3::new(200., 0., 0.)),
            ..Default::default()
        })
        .with_children(|parent| {
            parent
                .spawn(SpriteBundle {
                    sprite: Sprite {
                        size: Vec2::splat(250.),
                        ..Default::default()
                    },
                    material: materials.add(lerp(color0, color1, 0.).into()),
                    ..Default::default()
                })
                .spawn(SpriteBundle {
                    sprite: Sprite {
                        size: Vec2::splat(200.),
                        ..Default::default()
                    },
                    material: materials.add(lerp(color0, color1, 0.25).into()),
                    ..Default::default()
                })
                .spawn(SpriteBundle {
                    sprite: Sprite {
                        size: Vec2::splat(150.),
                        ..Default::default()
                    },
                    material: materials.add(lerp(color0, color1, 0.5).into()),
                    ..Default::default()
                })
                .spawn(SpriteBundle {
                    sprite: Sprite {
                        size: Vec2::splat(100.),
                        ..Default::default()
                    },
                    material: materials.add(lerp(color0, color1, 0.75).into()),
                    ..Default::default()
                })
                .spawn(SpriteBundle {
                    sprite: Sprite {
                        size: Vec2::splat(50.),
                        ..Default::default()
                    },
                    material: materials.add(lerp(color0, color1, 1.).into()),
                    ..Default::default()
                });
        });
}

fn lerp(color0: Color, color1: Color, t: f32) -> Color {
    let r0 = color0.r();
    let g0 = color0.g();
    let b0 = color0.b();
    let r1 = color1.r();
    let g1 = color1.g();
    let b1 = color1.b();

    Color::rgb(r0 + t * (r1 - r0), g0 + t * (g1 - g0), b0 + t * (b1 - b0))
}

fn lerp_linear(color0: Color, color1: Color, t: f32) -> Color {
    let r0 = color0.r_linear();
    let g0 = color0.g_linear();
    let b0 = color0.b_linear();
    let r1 = color1.r_linear();
    let g1 = color1.g_linear();
    let b1 = color1.b_linear();

    Color::rgb_linear(r0 + t * (r1 - r0), g0 + t * (g1 - g0), b0 + t * (b1 - b0))
}

This changes when you add colours.

    let color0 = Color::RED;
    let color1 = Color::GREEN;

Reference: https://www.colorhexa.com/ff0000-to-00ff00
In this case, the left side (linear) looks more pleasing / expected.

But when the colours look like this:

    let color0 = Color::YELLOW;
    let color1 = Color::BLUE;

Reference: https://www.colorhexa.com/ffff00-to-0000ff
Neither seem appropriate.

In conclusion, colour is weird. Perhaps it makes sense to use something like palette.

Uh oh!

Add a Color lerp() method #1402

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions