Bitbybit Docs
    Bereite Suchindex vor...

    Klasse Color

    Farben in den beiden Formen, die die Bibliothek verwendet: ein Hex-Text wie #ff5733 und ein Objekt { r, g, b } oder { r, g, b, a }, dessen Kanäle entweder von 0 bis 255 oder von 0 bis 1 laufen. Die Methoden hier bauen Farben in jeder Form, wandeln mit einem expliziten Kanalbereich zwischen ihnen um, lesen einzelne Kanäle und invertieren eine Farbe.

    Index

    Konstruktoren

    convert

    • Liest eine Hex-Farbe in ein { r, g, b }-Objekt mit Kanälen von 0 bis 255 ein.

      Der Text darf mit oder ohne # beginnen; alles andere als sechs Hex-Ziffern löst einen Fehler aus. Beispiel: '#FF5733' -> { r: 255, g: 87, b: 51 }

      Parameter

      Rückgabewert ColorRGB

      Das Farbobjekt mit Kanälen von 0 bis 255

      const rgb = bitbybit.color.hexToRgb({ color: "#ff5733" });
      
    • Schreibt drei Kanalwerte als Hex-Farbe.

      min und max sagen, welchen Bereich die Werte verwenden; ein anderer Bereich als 0 bis 255 wird zuerst umgerechnet, sodass auch Kanäle von 0 bis 1 funktionieren. Beispiel: r 255, g 87, b 51 in [0,255] -> '#ff5733'; r 1, g 0.5, b 0.2 in [0,1] -> '#ff8033'

      Parameter

      • inputs: RGBMinMaxDto

        Die Rot-, Grün- und Blauwerte und ihr Bereich

      Rückgabewert string

      Die Hex-Farbe

      const hex = bitbybit.color.rgbToHex({ r: 1, g: 0.5, b: 0.2, min: 0, max: 1 });
      
    • Schreibt eine { r, g, b }-Farbe als Hex-Farbe.

      min und max sagen, welchen Bereich die Kanäle verwenden; ein anderer Bereich als 0 bis 255 wird zuerst umgerechnet. Beispiel: { r: 1, g: 0.5, b: 0.2 } in [0,1] -> '#ff8033'

      Parameter

      • inputs: RGBObjectMaxDto

        Das Farbobjekt und der Bereich, den seine Kanäle verwenden

      Rückgabewert string

      Die Hex-Farbe

      const hex = bitbybit.color.rgbObjToHex({ rgb: { r: 1, g: 0.5, b: 0.2 }, min: 0, max: 1 });
      
    • Liest eine Hex-Farbe in ein { r, g, b }-Objekt ein, mit den Kanälen auf einen Bereich Ihrer Wahl umgerechnet.

      Beispiel: '#FF5733' abgebildet auf [0,1] -> { r: 1, g: 0.341, b: 0.2 }

      Parameter

      • inputs: HexDtoMapped

        Die Hex-Farbe und der Bereich, auf den die Kanäle abgebildet werden

      Rückgabewert ColorRGB

      Das Farbobjekt mit Kanälen in diesem Bereich

      const rgb = bitbybit.color.hexToRgbMapped({ color: "#ff5733", from: 0, to: 1 });
      

    create

    • Reicht eine Hex-Farbe unverändert durch, sodass eine Farbe einen Namen erhalten und wiederverwendet werden kann.

      Beispiel: '#FF5733' -> '#FF5733'

      Parameter

      Rückgabewert string

      Dieselbe Hex-Farbe

    • Reicht eine { r, g, b }-Farbe mit Kanälen von 0 bis 255 unverändert durch, sodass sie einen Namen erhalten und wiederverwendet werden kann.

      Beispiel: { r: 255, g: 87, b: 51 } -> dasselbe Objekt

      Parameter

      Rückgabewert ColorRGB

      Dasselbe Farbobjekt

    • Reicht eine { r, g, b }-Farbe mit Kanälen von 0 bis 1 unverändert durch, sodass sie einen Namen erhalten und wiederverwendet werden kann.

      Beispiel: { r: 1, g: 0.34, b: 0.2 } -> dasselbe Objekt

      Parameter

      Rückgabewert ColorRGB

      Dasselbe Farbobjekt

    • Reicht eine { r, g, b, a }-Farbe mit Farbkanälen von 0 bis 255 und Deckkraft von 0 bis 1 unverändert durch, sodass sie einen Namen erhalten und wiederverwendet werden kann.

      Beispiel: { r: 255, g: 87, b: 51, a: 1 } -> dasselbe Objekt

      Parameter

      Rückgabewert ColorRGBA

      Dasselbe Farbobjekt

    • Reicht eine { r, g, b, a }-Farbe mit jedem Kanal von 0 bis 1 unverändert durch, sodass sie einen Namen erhalten und wiederverwendet werden kann.

      Beispiel: { r: 1, g: 0.34, b: 0.2, a: 1 } -> dasselbe Objekt

      Parameter

      Rückgabewert ColorRGBA

      Dasselbe Farbobjekt

    • Erzeugt eine { r, g, b }-Farbe aus drei getrennten Kanalwerten von 0 bis 255.

      Beispiel: r 255, g 87, b 51 -> { r: 255, g: 87, b: 51 }

      Parameter

      Rückgabewert ColorRGB

      Das Farbobjekt

      const orange = bitbybit.color.rgbAtomic255Color({ r: 255, g: 87, b: 51 });
      
    • Erzeugt eine { r, g, b }-Farbe aus drei getrennten Kanalwerten von 0 bis 1.

      Beispiel: r 1, g 0.34, b 0.2 -> { r: 1, g: 0.34, b: 0.2 }

      Parameter

      Rückgabewert ColorRGB

      Das Farbobjekt

      const orange = bitbybit.color.rgbAtomic1Color({ r: 1, g: 0.34, b: 0.2 });
      

    hex to

    • Liest den Rotkanal einer Hex-Farbe, umgerechnet auf einen Bereich Ihrer Wahl.

      Beispiel: '#FF5733' in [0,1] -> 1

      Parameter

      • inputs: HexDtoMapped

        Die Hex-Farbe und der Bereich, auf den der Kanal abgebildet wird

      Rückgabewert number

      Der Rotkanal in diesem Bereich

      const red = bitbybit.color.getRedParam({ color: "#ff5733", from: 0, to: 1 });
      
    • Liest den Grünkanal einer Hex-Farbe, umgerechnet auf einen Bereich Ihrer Wahl.

      Beispiel: '#FF5733' in [0,1] -> 0.341

      Parameter

      • inputs: HexDtoMapped

        Die Hex-Farbe und der Bereich, auf den der Kanal abgebildet wird

      Rückgabewert number

      Der Grünkanal in diesem Bereich

      const green = bitbybit.color.getGreenParam({ color: "#ff5733", from: 0, to: 1 });
      
    • Liest den Blaukanal einer Hex-Farbe, umgerechnet auf einen Bereich Ihrer Wahl.

      Beispiel: '#FF5733' in [0,1] -> 0.2

      Parameter

      • inputs: HexDtoMapped

        Die Hex-Farbe und der Bereich, auf den der Kanal abgebildet wird

      Rückgabewert number

      Der Blaukanal in diesem Bereich

      const blue = bitbybit.color.getBlueParam({ color: "#ff5733", from: 0, to: 1 });
      
    • Invertiert eine Hex-Farbe und verwandelt jeden Kanal in sein Gegenteil: 255 minus den Wert.

      Mit blackAndWhite an ist das Ergebnis reines Schwarz für eine helle Farbe oder Weiß für eine dunkle, was zu Text auf farbigem Hintergrund passt. Beispiel: '#FF5733' -> '#00a8cc'; mit blackAndWhite -> '#ffffff'

      Parameter

      • inputs: InvertHexDto

        Die Hex-Farbe und ob das Ergebnis auf Schwarz oder Weiß reduziert wird

      Rückgabewert string

      Die invertierte Hex-Farbe

      const textColor = bitbybit.color.invert({ color: "#ff5733", blackAndWhite: true });
      

    rgb to

    • Liest den Rotkanal einer { r, g, b }-Farbe.

      Beispiel: { r: 255, g: 87, b: 51 } -> 255

      Parameter

      Rückgabewert number

      Der Rotkanal, in dem Bereich, den das Objekt verwendet

    • Liest den Grünkanal einer { r, g, b }-Farbe.

      Beispiel: { r: 255, g: 87, b: 51 } -> 87

      Parameter

      Rückgabewert number

      Der Grünkanal, in dem Bereich, den das Objekt verwendet

    • Liest den Blaukanal einer { r, g, b }-Farbe.

      Beispiel: { r: 255, g: 87, b: 51 } -> 51

      Parameter

      Rückgabewert number

      Der Blaukanal, in dem Bereich, den das Objekt verwendet