Generating your color palette in CSS | HTTP 203

Поділитися
Вставка
  • Опубліковано 24 сер 2024

КОМЕНТАРІ • 52

  • @olivarra1
    @olivarra1 2 роки тому +18

    203 quickly became one of my favourite series in here - All topics are so interesting and that touch of humour surma + archivald add is great

  • @ColinRichardson
    @ColinRichardson 2 роки тому +17

    This topic always reminds me of "the pinkest pink" and "the blackest black" videos where they repeatedly say "the screen cannot display how outrageous this colour is" but there are always people in the comments that don't understand.
    I am feeling confident on the HTTP audience we will have a better success rate.

    • @hrgwea
      @hrgwea 2 роки тому

      Newer generations only know the world through screens, so it's understandable.

  • @ste-fa-no
    @ste-fa-no 2 роки тому

    Admirer of *Lea Verou* since 2011! 🤓
    I've always found her talks to be fascinating and it's so cool to see her and Chris Lilley's work in W3C. 👏

  • @RideTheTeacups
    @RideTheTeacups 2 роки тому +11

    I’m looking forward to the light & dark defined at the end, but I’m incredibly interested in taking a new look at my gradient colors. I had no idea different color spaces rendered gradients so differently based on how they mix. That’s wild! Thanks for a great video.

  • @Dominik-K
    @Dominik-K 2 роки тому +4

    Thanks a ton for this informative piece! color-contrast is the best color feature I've learned, as this will make accessibility much better

  • @SebastianZartner
    @SebastianZartner 2 роки тому +1

    I am very excited about all the new stuff that got added in Color 4 and 5 and even more that browsers jump on it and already start to implement the new features! The world needs to be more colorful!

  • @fatih.tavukcu
    @fatih.tavukcu 2 роки тому +1

    I am _absolutely_ stoked to use this! Can't wait for this to be widely available :) Also the new lightness syntax is amazing!

  • @cozmocozi6858
    @cozmocozi6858 2 роки тому +2

    Text color inversion with color contrast has been supported since the support of CSS filters. you can achieve that effect using "filter: grayscale(100%) contrast(10000%) invert(1)", make sure your background color is set as color for the text so it inverts correctly.

    • @dassurma
      @dassurma 2 роки тому +1

      That’s a neat trick! However, it limits you to only full black or full white as your text color, while `color-contrast()` works with all colors.

    • @cozmocozi6858
      @cozmocozi6858 2 роки тому

      @@dassurma isn't it the same as "filter: contrast(10000%) invert(1);" ?

    • @dassurma
      @dassurma 2 роки тому +2

      @@cozmocozi6858 No that really just uses the inverted color (try it!). While that is quite contrast-y, it doesn’t incorporate human perception at all and is seldom a nice color choice from a design perspective.

    • @cozmocozi6858
      @cozmocozi6858 2 роки тому

      @@dassurma I just tested it and OMG!! you sir just opened Pandora's box! Can't wait for this to be released. Thank you so much for these informative and very underrated videos :D

  • @sharkinahat
    @sharkinahat 2 роки тому +23

    Hmm, interesting * goes back to using the few named colors that I can remember the names of *

    • @Thorax232
      @Thorax232 2 роки тому +3

      * scratches head trying to decide between darkGrey and darkGray *

  • @__mayank
    @__mayank 2 роки тому +1

    This is peak television

  • @vidsofyermom
    @vidsofyermom 2 роки тому +4

    Love the Joy con slide mover. :D

    • @patriciaverso
      @patriciaverso 2 роки тому +1

      They have a video on that somewhere. If you've ever tried to use a WiiRemote connected to a computer you'll be surprised by the ease of use of the JoyCons.

  • @SimonBuchanNz
    @SimonBuchanNz 2 роки тому +2

    Ha, was that my comment that just got immortalized into the HTTP 203 canon?
    The only thing I found wrong seeming this episode was referring to xyz() as linear sRGB. Surely that is CIE 1931, where the XZ plane is chroma and Y is luminance. Linear sRGB is simply the sRGB primaries with an optically linear transfer function, that is, no gamma or clamping, and is exceedingly useful in itself separate from XYZ.
    Otherwise I think it's also worth mentioning that in theory all the luminescence / chroma spaces can represent every color just by not clamping, while the primary based spaces like RGB and CMYK are fundamentally limited to their gamut.
    I was right about my guess as to what safari would do with the out of gamut color, but for the wrong reason. I thought it would pick the closest valid point in the color space, including for different luminescence, but it's actually dumber than that. The right answer is to pick the closest valid color in the chroma plane at that luminescence, but I don't know if that's cheap enough.

    • @DasAntiNaziBroetchen
      @DasAntiNaziBroetchen Рік тому

      The "no clamping" thing you described sounds like how scRGB works. It's basically a scaled-up version of sRGB. More on wikipedia.

  • @derSeega
    @derSeega 2 роки тому +4

    I'm glad I only needed to do rgb to hsl conversions in University. This looks like a full semester of brain f*** 😁.
    I really enjoyed the audio and visual explanations 👍

  • @AndreyLipattsev
    @AndreyLipattsev 2 роки тому +1

    I didn't know there was so much green in the whole Galaxy... 4:30

  • @CrazyCodingChannel
    @CrazyCodingChannel 2 роки тому +2

    Very interesting dialogue, thank you

  • @TomHermans
    @TomHermans 2 роки тому +1

    Thanks guys. Informative and funny once again 🙏

  • @mudscuffer
    @mudscuffer 2 роки тому +2

    This is nice to see, though I wonder how long it will take before we get smooth blending of multi-colour gradients... (I.e. where the colour stops are smoothly blended in the 3d colour space using e.g. bezier curves, rather than linearly from one colour stop to the next.)

  • @sampathbalivada-personal
    @sampathbalivada-personal 2 роки тому +1

    That was fun to watch.

  • @thmsrttg
    @thmsrttg 2 роки тому +2

    More CSS videos, please.

  • @m-vo
    @m-vo 2 роки тому +3

    Interesting topic! Thanks for the video. Two things come to my mind: What about blend modes and how is opacity working when dealing with different color spaces? For instance: I'd intuitively expect a gradient going from blue to white to look identical to one going from blue to transparent on a white background.

    • @SimonBuchanNz
      @SimonBuchanNz 2 роки тому +1

      Great question! Alpha is, strictly, not in any color space but has always been treated as being linear by the time people noticed that was a thing to care about, so this case would only be true with linear rgb spaces. This is normally the case in shaders, but I suspect not for html.

  • @tomasvidal424
    @tomasvidal424 2 роки тому +2

    So cool! Great explanation!

  • @rsbl
    @rsbl 2 роки тому +3

    Nice

  • @davidjamgochian
    @davidjamgochian 2 роки тому +1

    Great video

  • @jeremyscheatday7305
    @jeremyscheatday7305 2 роки тому +1

    OMG COLOR-CONTRAST!!!!!

  • @TheNewton
    @TheNewton 2 роки тому +1

    I just want to be able to redefine html safe color words in CSS to a different palate .

    • @jakearchibald
      @jakearchibald 2 роки тому

      CSS custom properties give you the closest thing to this (and with more capabilities)

  • @zanehannan5306
    @zanehannan5306 2 роки тому +1

    And now the final frontier: when is nm to be a valid way to tell a colour what colour it is

    • @SimonBuchanNz
      @SimonBuchanNz 2 роки тому +2

      Only for monochromatic colors, and you still have to pick a way to map it to a valid display color: this is different in different color spaces. I want to give an EM spectrum, to handle our future quinchromatic alien friends.

  • @wmhilton-old
    @wmhilton-old 2 роки тому

    This is just SO exciting! Although now I'm even more afraid of gradients 😆

  • @waso
    @waso 2 роки тому +1

    New episode!!!

  • @jeremyscheatday7305
    @jeremyscheatday7305 2 роки тому +1

    Yea color spaces nice but omg!

  • @YOUTUBEACEHBERDIKARI
    @YOUTUBEACEHBERDIKARI 2 роки тому +1

    Video yang bagus dan kreatif yang luar biasa

  • @kenbhho3486
    @kenbhho3486 2 роки тому +2

    Great 😃😃😃

  • @LivingImage
    @LivingImage 2 роки тому +1

    Great

  • @aarontgove101
    @aarontgove101 2 роки тому +2

    First! 🤘

    • @thmsrttg
      @thmsrttg 2 роки тому

      WAIT WHAT??? HOW???

    • @pelic9608
      @pelic9608 2 роки тому

      @@thmsrttg You can comment on unlisted videos.

    • @dassurma
      @dassurma 2 роки тому +1

      @@thmsrttg By being our producer for HTTP203 😂

  • @timkilian7140
    @timkilian7140 2 роки тому

    sRGB, rest is overengineering.

    • @dassurma
      @dassurma 2 роки тому +1

      I think that will change once wider-gamut displays become the norm. Colors look really pale in comparison. Just like SD used to be the norm, and now it looks really shit because we are used to HD everywhere.

    • @timkilian7140
      @timkilian7140 2 роки тому

      Yes. But 4k and 8k is still overkill. There is a point where you reached the sweet spot, and sRGB is exactly that.

    • @DasAntiNaziBroetchen
      @DasAntiNaziBroetchen Рік тому

      @@timkilian7140 lmao how ignorant.

  •  2 роки тому +2

    en.m.wikipedia.org/wiki/Color_difference The interesting part is to see how the formula for delta E has evolved.