{"id":9961,"date":"2025-10-14T10:30:19","date_gmt":"2025-10-14T10:30:19","guid":{"rendered":"https:\/\/bscwebdesign.at\/blog\/website-colors-2025-effect-and-psychology-2\/"},"modified":"2025-12-02T08:25:38","modified_gmt":"2025-12-02T08:25:38","slug":"website-colors-2025-effect-and-psychology-2","status":"publish","type":"post","link":"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/","title":{"rendered":"Website colors 2025: Effect and psychology"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"9961\" class=\"elementor elementor-9961 elementor-8512\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f5e3fc e-flex e-con-boxed e-con e-parent\" data-id=\"1f5e3fc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-7212721 e-con-full e-flex e-con e-child\" data-id=\"7212721\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6d03f60 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"6d03f60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Website colors 2025: Effect and psychology<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8547253 e-con-full elementor-hidden-mobile e-flex e-con e-child\" data-id=\"8547253\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2fe8ad8 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"2fe8ad8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp\" class=\"attachment-medium size-medium wp-image-3952\" alt=\"Portr\u00e4t von Tobias Berger, junger Mann mit lockigen Haaren und blauem BSC-Pulli, l\u00e4chelnd in die Kamera blickend.\" srcset=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp 300w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-1024x1024.webp 1024w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-150x150.webp 150w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-768x768.webp 768w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-1536x1536.webp 1536w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-2048x2048.webp 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7bbf15a elementor-hidden-mobile elementor-widget elementor-widget-text-editor\" data-id=\"7bbf15a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p style=\"font-family: 'Sora variabel', sans-serif; color: #000;\"><span style=\"color: #000;\">by<\/span> Tobias Berger \/ <span style=\"color: #000;\">updated<\/span> 06.11.2025 \/ 7 min. reading time <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7767b44 e-con-full elementor-hidden-desktop elementor-hidden-tablet e-flex e-con e-child\" data-id=\"7767b44\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-36db9a7 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"36db9a7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp\" class=\"attachment-medium size-medium wp-image-3952\" alt=\"Portr\u00e4t von Tobias Berger, junger Mann mit lockigen Haaren und blauem BSC-Pulli, l\u00e4chelnd in die Kamera blickend.\" srcset=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp 300w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-1024x1024.webp 1024w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-150x150.webp 150w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-768x768.webp 768w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-1536x1536.webp 1536w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-2048x2048.webp 2048w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-731ade6 elementor-hidden-desktop elementor-hidden-tablet elementor-widget elementor-widget-text-editor\" data-id=\"731ade6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p style=\"font-family: 'Sora variabel', sans-serif; color: #000;\"><span style=\"color: #000;\">by<\/span> Tobias Berger \/ <span style=\"color: #000;\">updated<\/span> 06.11.2025 \/ <br>7 min. reading time <\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f8b02ff e-flex e-con-boxed e-con e-parent\" data-id=\"f8b02ff\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-07cf13b e-con-full e-flex e-con e-child\" data-id=\"07cf13b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e2e2f0 elementor-widget elementor-widget-text-editor\" data-id=\"7e2e2f0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"sec-intro\" class=\"bsc-domain\">\n  <div class=\"wrap\">\n  This overview shows the effect of central website colors.\n  Click on &#8220;More info&#8221; below for examples, combination tips and ideas for use.\n  <\/div>\n<\/section>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1fc5a60 e-flex e-con-boxed e-con e-parent\" data-id=\"1fc5a60\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-07acf57 e-con-full e-flex e-con e-child\" data-id=\"07acf57\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6955832 elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-text-editor\" data-id=\"6955832\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"sec-color-columns\" class=\"bsc-domain\">\n  <div class=\"wrap-1000\">\n    <div class=\"col side\"><\/div>\n\n    <div class=\"col center\">\n      <div class=\"stage\">\n\n        \n        <span class=\"dot\" style=\"--y:70px; --dx:-90px; --d:100px; --c:#FFD84D\" title=\"Yellow\"><\/span>\n        <span class=\"dot\" id=\"dot-blau\" style=\"--y:70px; --dx:110px; --d:80px; --c:#243B6B\" title=\"Blue\"><\/span>\n        <span class=\"dot\" style=\"--y:180px; --dx:40px; --d:130px; --c:#2E7D4D\" title=\"Green\"><\/span>\n        <span class=\"dot\" style=\"--y:226px; --dx:-130px; --d:88px; --c:#F28020\" title=\"Orange\"><\/span>\n        <span class=\"dot\" style=\"--y:310px; --dx:0px; --d:110px; --c:#E43B2F\" title=\"Red\"><\/span>\n        <span class=\"dot\" style=\"--y:275px; --dx:150px; --d:80px; --c:#17A2B8\" title=\"Turquoise\"><\/span>\n        <span class=\"dot\" style=\"--y:400px; --dx:-60px; --d:100px; --c:#6F3FB5\" title=\"Purple\"><\/span>\n        <span class=\"dot\" style=\"--y:410px; --dx:120px; --d:94px; --c:#E91E63\" title=\"Pink\"><\/span>\n        <span class=\"dot\" style=\"--y:500px; --dx:-100px; --d:100px; --c:#8B5E3C\" title=\"Brown\"><\/span>\n        <span class=\"dot\" style=\"--y:547px; --dx:80px; --d:95px; --c:#9CA3AF\" title=\"Gray\"><\/span>\n        <span class=\"dot\" style=\"--y:590px; --dx:-20px; --d:74px; --c:#000000\" title=\"Black\"><\/span>\n        <span class=\"dot is-white\" style=\"--y:660px; --dx:75px; --d:110px; --c:#FFFFFF\" title=\"White\"><\/span>\n\n        \n        <svg class=\"wire-svg\" viewbox=\"0 0 800 720\"><path d=\"M350 70 C 420 25 520 120 620 70\" class=\"wire-path\" style=\"--wire-color:#243B6B\"><\/path><\/svg>\n        <div class=\"info-box info-right\" style=\"top:70px;\"><div class=\"info-head\"><h3 style=\"color:#243B6B;\">Blue:<\/h3><a href=\"#farbe-blau\" class=\"mini-btn-ghost\">More info<\/a><\/div><p>Peace, trust &amp; security<\/p><\/div>\n\n        <svg class=\"wire-svg\" viewbox=\"0 0 800 720\"><path d=\"M305 180 C 380 210 520 150 620 183\" class=\"wire-path\" style=\"--wire-color:#2E7D4D\"><\/path><\/svg>\n        <div class=\"info-box info-right\" style=\"top:183px;\"><div class=\"info-head\"><h3 style=\"color:#2E7D4D;\">Green:<\/h3><a href=\"#farbe-gruen\" class=\"mini-btn-ghost\">More info<\/a><\/div><p>Nature, balance &amp; growth<\/p><\/div>\n\n        <svg class=\"wire-svg\" viewbox=\"0 0 800 720\"><path d=\"M390 275 C 455 310 555 245 620 296\" class=\"wire-path\" style=\"--wire-color:#17A2B8\"><\/path><\/svg>\n        <div class=\"info-box info-right\" style=\"top:296px;\"><div class=\"info-head\"><h3 style=\"color:#17A2B8;\">Turquoise:<\/h3><a href=\"#farbe-tuerkis\" class=\"mini-btn-ghost\">More info<\/a><\/div><p>Freshness, clarity &amp; digital<\/p><\/div>\n\n        <svg class=\"wire-svg\" viewbox=\"0 0 800 720\"><path d=\"M365 410 C 455 360 545 430 620 409\" class=\"wire-path\" style=\"--wire-color:#E91E63\"><\/path><\/svg>\n        <div class=\"info-box info-right\" style=\"top:409px;\"><div class=\"info-head\"><h3 style=\"color:#E91E63;\">Pink:<\/h3><a href=\"#farbe-pink\" class=\"mini-btn-ghost\">More info<\/a><\/div><p>Gentleness, friendliness &amp; closeness<\/p><\/div>\n\n        <svg class=\"wire-svg\" viewbox=\"0 0 800 720\"><path d=\"M323 547 C 400 595 540 500 620 522\" class=\"wire-path\" style=\"--wire-color:#9CA3AF\"><\/path><\/svg>\n        <div class=\"info-box info-right\" style=\"top:522px;\"><div class=\"info-head\"><h3 style=\"color:#9CA3AF;\">Gray:<\/h3><a href=\"#farbe-grau\" class=\"mini-btn-ghost\">More info<\/a><\/div><p>Neutrality, calm &amp; objectivity<\/p><\/div>\n\n        <svg class=\"wire-svg\" viewbox=\"0 0 800 720\"><path d=\"M340 660 C 480 610 560 600 620 635\" class=\"wire-path\" style=\"--wire-color:#E5E7EB\"><\/path><\/svg>\n        <div class=\"info-box info-right\" style=\"top:635px;\"><div class=\"info-head\"><h3 style=\"color:#E5E7EB;\">White:<\/h3><a href=\"#farbe-weiss\" class=\"mini-btn-ghost\">More info<\/a><\/div><p>Purity, peace &amp; cleanliness<\/p><\/div>\n\n        \n        <svg class=\"wire-svg\" viewbox=\"0 0 800 720\"><path d=\"M60 70 C -10 25 -130 120 -220 70\" class=\"wire-path\" style=\"--wire-color:#FFD84D\"><\/path><\/svg>\n        <div class=\"info-box info-left\" style=\"top:70px;\"><div class=\"info-head\"><h3 style=\"color:#B88A00;\">Yellow:<\/h3><a href=\"#farbe-gelb\" class=\"mini-btn-ghost\">More info<\/a><\/div><p>Friendliness &amp; attentiveness<\/p><\/div>\n\n        <svg class=\"wire-svg\" viewbox=\"0 0 800 720\"><path d=\"M26 226 C -40 270 -130 210 -220 183\" class=\"wire-path\" style=\"--wire-color:#F28020\"><\/path><\/svg>\n        <div class=\"info-box info-left\" style=\"top:183px;\"><div class=\"info-head\"><h3 style=\"color:#C56212;\">Orange:<\/h3><a href=\"#farbe-orange\" class=\"mini-btn-ghost\">More info<\/a><\/div><p>Energy, optimism &amp; action<\/p><\/div>\n\n        <svg class=\"wire-svg\" viewbox=\"0 0 800 720\"><path d=\"M145 310 C 60 270 -80 320 -220 296\" class=\"wire-path\" style=\"--wire-color:#E43B2F\"><\/path><\/svg>\n        <div class=\"info-box info-left\" style=\"top:296px;\"><div class=\"info-head\"><h3 style=\"color:#C22922;\">Red:<\/h3><a href=\"#farbe-rot\" class=\"mini-btn-ghost\">More info<\/a><\/div><p>Passion, determination &amp; strength<\/p><\/div>\n\n        <svg class=\"wire-svg\" viewbox=\"0 0 800 720\"><path d=\"M90 400 C 0 450 -120 410 -220 409\" class=\"wire-path\" style=\"--wire-color:#6F3FB5\"><\/path><\/svg>\n        <div class=\"info-box info-left\" style=\"top:409px;\"><div class=\"info-head\"><h3 style=\"color:#5B2E9D;\">Purple:<\/h3><a href=\"#farbe-lila\" class=\"mini-btn-ghost\">More info<\/a><\/div><p>Inspiration, depth &amp; creativity<\/p><\/div>\n\n        <svg class=\"wire-svg\" viewbox=\"0 0 800 720\"><path d=\"M50 500 C -40 450 -120 540 -220 522\" class=\"wire-path\" style=\"--wire-color:#8B5E3C\"><\/path><\/svg>\n        <div class=\"info-box info-left\" style=\"top:522px;\"><div class=\"info-head\"><h3 style=\"color:#70492F;\">Brown:<\/h3><a href=\"#farbe-braun\" class=\"mini-btn-ghost\">More info<\/a><\/div><p>Reliability, warmth &amp; naturalness<\/p><\/div>\n\n        <svg class=\"wire-svg\" viewbox=\"0 0 800 720\"><path d=\"M143 590 C 60 640 -60 580 -220 635\" class=\"wire-path\" style=\"--wire-color:#000000\"><\/path><\/svg>\n        <div class=\"info-box info-left\" style=\"top:635px;\"><div class=\"info-head\"><h3 style=\"color:#111111;\">Black:<\/h3><a href=\"#farbe-schwarz\" class=\"mini-btn-ghost\">More info<\/a><\/div><p>Elegance, authority &amp; contrast<\/p><\/div>\n\n      <\/div>\n    <\/div>\n\n    <div class=\"col side\"><\/div>\n  <\/div>\n<\/section>\n\n<style>\n  #sec-color-columns .wrap-1000{\n    width:1000px;margin:0 auto;\n    display:grid;grid-template-columns:300px 400px 300px;\n  }\n  #sec-color-columns .col.center{display:flex;justify-content:center;}\n  #sec-color-columns .stage{position:relative;width:400px;height:720px;overflow:visible;background:none;}\n\n  \/* Kugeln *\/\n  #sec-color-columns .dot{\n    position:absolute;left:calc(50% + var(--dx));top:var(--y);\n    transform:translate(-50%,-50%);\n    width:var(--d);height:var(--d);border-radius:50%;\n    background:var(--c);border:1px solid rgba(0,0,0,.12);\n    box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 6px 18px rgba(12,12,13,.08);\n  }\n  #sec-color-columns .dot.is-white{border:1px solid #E5E7EB;}\n\n  \/* Linien *\/\n  #sec-color-columns .wire-svg{position:absolute;left:0;top:0;width:800px;height:720px;pointer-events:none;overflow:visible;}\n  #sec-color-columns .wire-path{fill:none;stroke:var(--wire-color,#111);stroke-opacity:.9;stroke-width:1;stroke-dasharray:6 6;stroke-linecap:round;}\n\n  \/* Boxen (40px n\u00e4her zur Mitte) *\/\n  #sec-color-columns .info-box{\n    position:absolute;transform:translateY(-50%);\n    background:#FAFAFA;border:1px solid #E5E7EB;border-radius:12px;\n    padding:12px 14px;box-shadow:none;width:220px;\n  }\n  #sec-color-columns .info-right{left:calc(50% + 270px);}\n  #sec-color-columns .info-left{left:calc(50% - 270px - 220px);}\n\n  .info-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px;}\n  #sec-color-columns .info-box h3{margin:0;font-size:15px;font-weight:700;}\n  #sec-color-columns .info-box p{margin:0;color:#1c1c1e;font-size:.95rem;line-height:1.4;}\n\n  \/* Minimaler grauer Button *\/\n  #sec-color-columns .mini-btn-ghost{\n    display:inline-flex;align-items:center;font-size:.8rem;line-height:1;\n    padding:6px 8px;border:1px solid #E5E7EB;border-radius:8px;\n    color:#6B7280;background:#F5F6F7;text-decoration:none;\n    transition:all .15s ease;white-space:nowrap;\n  }\n  #sec-color-columns .mini-btn-ghost:hover{background:#EDEEEF;color:#111;border-color:#D1D5DB;transform:translateY(-1px);}\n  #sec-color-columns .mini-btn-ghost:active{transform:translateY(0);}\n\n  .bsc-domain{font-family:\"Sora\",system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif;font-size:16px;line-height:1.8;color:#0c0c0d;}\n\n  \/* Sanftes Scrollen *\/\n  html{scroll-behavior:smooth;}\n  \/* Offset direkt auf den echten Sektionen (IDs der Farbbl\u00f6cke) setzen: *\/\n  #farbe-gelb, #farbe-orange, #farbe-rot, #farbe-lila, #farbe-braun, #farbe-schwarz,\n  #farbe-blau, #farbe-gruen, #farbe-tuerkis, #farbe-pink, #farbe-grau, #farbe-weiss {\n    scroll-margin-top: 90px; \/* an deine Sticky-Header-H\u00f6he anpassen *\/\n  }\n<\/style>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-043ef9a elementor-widget elementor-widget-text-editor\" data-id=\"043ef9a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\n<section id=\"colors-mobile-compact\" class=\"bsc-domain\">\n  <div class=\"color-grid\">\n    <a href=\"#farbe-blau\" class=\"tile\" style=\"--c:#243B6B;\"><span class=\"swatch\"><\/span><span class=\"label\">Blue<\/span><span class=\"btn\">Info<\/span><\/a>\n    <a href=\"#farbe-gruen\" class=\"tile\" style=\"--c:#2e7d4d;\"><span class=\"swatch\"><\/span><span class=\"label\">Green<\/span><span class=\"btn\">Info<\/span><\/a>\n    <a href=\"#farbe-tuerkis\" class=\"tile\" style=\"--c:#17a2b8;\"><span class=\"swatch\"><\/span><span class=\"label\">Turquoise<\/span><span class=\"btn\">Info<\/span><\/a>\n    <a href=\"#farbe-pink\" class=\"tile\" style=\"--c:#e91e63;\"><span class=\"swatch\"><\/span><span class=\"label\">Pink<\/span><span class=\"btn\">Info<\/span><\/a>\n    <a href=\"#farbe-grau\" class=\"tile\" style=\"--c:#9ca3af;\"><span class=\"swatch\"><\/span><span class=\"label\">Gray<\/span><span class=\"btn\">Info<\/span><\/a>\n    <a href=\"#farbe-weiss\" class=\"tile\" style=\"--c:#e5e7eb;\"><span class=\"swatch swatch--ring\"><\/span><span class=\"label\">White<\/span><span class=\"btn\">Info<\/span><\/a>\n    <a href=\"#farbe-gelb\" class=\"tile\" style=\"--c:#b88a00;\"><span class=\"swatch\"><\/span><span class=\"label\">Yellow<\/span><span class=\"btn\">Info<\/span><\/a>\n    <a href=\"#farbe-orange\" class=\"tile\" style=\"--c:#c56212;\"><span class=\"swatch\"><\/span><span class=\"label\">Orange<\/span><span class=\"btn\">Info<\/span><\/a>\n    <a href=\"#farbe-rot\" class=\"tile\" style=\"--c:#c22922;\"><span class=\"swatch\"><\/span><span class=\"label\">Red<\/span><span class=\"btn\">Info<\/span><\/a>\n    <a href=\"#farbe-lila\" class=\"tile\" style=\"--c:#5b2e9d;\"><span class=\"swatch\"><\/span><span class=\"label\">Purple<\/span><span class=\"btn\">Info<\/span><\/a>\n    <a href=\"#farbe-braun\" class=\"tile\" style=\"--c:#70492f;\"><span class=\"swatch\"><\/span><span class=\"label\">Brown<\/span><span class=\"btn\">Info<\/span><\/a>\n    <a href=\"#farbe-schwarz\" class=\"tile\" style=\"--c:#111111;\"><span class=\"swatch\"><\/span><span class=\"label\">Black<\/span><span class=\"btn\">Info<\/span><\/a>\n  <\/div>\n<\/section>\n\n<style>\n\/* Nur bis max 1024px (iPad & Handy) anzeigen *\/\n#colors-mobile-compact{display:none;}\n@media (max-width:1024px){\n  #colors-mobile-compact{\n    display:block;\n    padding:0 16px 14px;\n  }\n}\n\n\/* Grid super kompakt *\/\n#colors-mobile-compact .color-grid{\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:10px;\n  font-family:\"Sora\",system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif;\n  box-sizing:border-box;\n}\n\n\/* Tile minimalistisch *\/\n#colors-mobile-compact .tile{\n  position:relative;\n  display:grid;\n  grid-template-columns:auto 1fr;\n  align-items:center;\n  gap:8px;\n  padding:10px;\n  border:1px solid #E5E7EB;\n  border-radius:10px;\n  background:#FAFAFA;\n  text-decoration:none;\n  color:#0c0c0d;\n  transition:background .15s ease;\n}\n#colors-mobile-compact .tile:hover{\n  background:#F1F2F3;\n}\n\n\/* Mini Button oben rechts *\/\n#colors-mobile-compact .btn{\n  position:absolute;\n  top:6px;right:6px;\n  font-size:11px;line-height:1;\n  padding:4px 6px;\n  border:1px solid #E5E7EB;\n  border-radius:999px;\n  background:#F5F6F7;\n  color:#6B7280;\n  pointer-events:none; \/* ganze Tile klickbar *\/\n}\n\n\/* Farbpunktswatch *\/\n#colors-mobile-compact .swatch{\n  width:16px;height:16px;\n  border-radius:50%;\n  background:var(--c);\n  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);\n}\n#colors-mobile-compact .swatch--ring{\n  box-shadow:inset 0 0 0 1px #D1D5DB,0 0 0 1px #E5E7EB;\n}\n\n\/* Label klein & clean *\/\n#colors-mobile-compact .label{\n  font-size:14px;\n  font-weight:600;\n  line-height:1;\n  white-space:nowrap;\n  overflow:hidden;\n  text-overflow:ellipsis;\n}\n\n\/* Sehr schmale Ger\u00e4te = 2 Spalten *\/\n@media (max-width:480px){\n  #colors-mobile-compact .color-grid{\n    grid-template-columns:repeat(2,minmax(0,1fr));\n  }\n}\n<\/style>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c38439d e-flex e-con-boxed e-con e-parent\" data-id=\"c38439d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c70e8f6 e-con-full e-flex e-con e-child\" data-id=\"c70e8f6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9cd3fe4 elementor-widget elementor-widget-text-editor\" data-id=\"9cd3fe4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"farbe-blau\" class=\"bsc-domain\" aria-labelledby=\"farbe-blau-title\">\n  <div class=\"wrap\">\n    <header class=\"head\">\n      <h2 id=\"farbe-blau-title\">Blue in web design: effect, meaning &amp; combinations #0000FF<\/h2>\n      <p class=\"lead\">\n  In short: calm, serious, confidence-building. Blue has a structured effect, reduces stress and directs the focus to content. \n      <\/p>\n    <\/header>\n\n    <div class=\"blue-grid\">\n      <article class=\"card\">\n        <h3>Effect<\/h3>\n        <ul class=\"bullet\">\n          <li>conveys calm, stability, competence<\/li>\n          <li>promotes trust and legibility<\/li>\n          <li>cool and objective instead of hot and emotional<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>When to use<\/h3>\n        <ul class=\"bullet\">\n          <li>when seriousness and clarity are paramount<\/li>\n          <li>for data and text-heavy sites, B2B &amp; SaaS<\/li>\n          <li>for conversion flows with security requirements (login, checkout)<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Less suitable<\/h3>\n        <ul class=\"bullet\">\n          <li>for warm lifestyle brands with strong storytelling<\/li>\n          <li>when &#8220;approachable&#8221; or &#8220;cozy&#8221; is more important than &#8220;precise&#8221;<\/li>\n          <li>for offers that sell via heat or enjoyment<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Typical industries<\/h3>\n        <ul class=\"bullet\">\n          <li>Finance, consulting, insurance<\/li>\n          <li>Education, public institutions<\/li>\n          <li>Technology, Software, Industry<\/li>\n        <\/ul>\n      <\/article>\n    <\/div>\n\n    <aside class=\"tip-box tip-compact\" aria-label=\"Farbkombinationen Tipp\">\n      <div class=\"tip-head\">\n        <span class=\"tip-dot\" aria-hidden=\"true\"><\/span>\n        <strong>Tip:<\/strong> Blue harmonizes particularly well with:\n      <\/div>\n\n      <div class=\"swatches labeled\">\n        <button class=\"swatch-item\" type=\"button\" data-hex=\"#FFFFFF\" aria-label=\"Hex #FFFFFF kopieren\">\n          <span class=\"swatch\" style=\"--c:#FFFFFF\" title=\"White\"><\/span>\n          <span class=\"hex\">#FFFFFF<\/span>\n          <span class=\"name\">White<\/span>\n        <\/button>\n\n        <button class=\"swatch-item\" type=\"button\" data-hex=\"#F3F4F6\" aria-label=\"Hex #F3F4F6 kopieren\">\n          <span class=\"swatch\" style=\"--c:#F3F4F6\" title=\"Light gray\"><\/span>\n          <span class=\"hex\">#F3F4F6<\/span>\n          <span class=\"name\">Light gray<\/span>\n        <\/button>\n\n        <button class=\"swatch-item\" type=\"button\" data-hex=\"#17A2B8\" aria-label=\"Hex #17A2B8 kopieren\">\n          <span class=\"swatch\" style=\"--c:#17A2B8\" title=\"Turquoise\"><\/span>\n          <span class=\"hex\">#17A2B8<\/span>\n          <span class=\"name\">Turquoise<\/span>\n        <\/button>\n\n        <button class=\"swatch-item\" type=\"button\" data-hex=\"#F28020\" aria-label=\"Hex #F28020 kopieren\">\n          <span class=\"swatch\" style=\"--c:#F28020\" title=\"Orange\"><\/span>\n          <span class=\"hex\">#F28020<\/span>\n          <span class=\"name\">Orange<\/span>\n        <\/button>\n      <\/div>\n\n      <p class=\"mini-tip\">Clean with white\/light gray; fresh accents in turquoise or orange.<\/p>\n      <p class=\"copy-hint\" role=\"status\" aria-live=\"polite\"><\/p>\n    <\/aside>\n  <\/div>\n<\/section>\n\n<style>\n  #farbe-blau {\n    --blue-900: #243B6B;\n    --ring: #dfe5f0;\n    --ink: #0f172a;\n    --muted: #4b5563;\n    --card: #ffffff;\n    --shadow-sm: 0 2px 10px rgba(12,12,13,0.06);\n    --shadow-lg: 0 14px 34px rgba(12,12,13,0.12);\n    font-family: \"Sora\", system-ui, sans-serif;\n  }\n\n  #farbe-blau .wrap {\n    max-width: 920px;\n    margin: 0 auto;\n    padding: 24px 16px 16px;\n  }\n\n  #farbe-blau .head h2 {\n    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);\n    font-weight: 800;\n    line-height: 1.2;\n    margin: 1.2rem 0 .4rem;\n  }\n\n  #farbe-blau .lead {\n    font-size: 1.02rem;\n    color: var(--muted);\n    max-width: 60ch;\n  }\n\n  #farbe-blau .blue-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n    gap: 16px;\n    margin-top: 1rem;\n  }\n\n  #farbe-blau .card {\n    border: 1px solid var(--ring);\n    border-radius: 16px;\n    background: var(--card);\n    padding: 16px;\n    box-shadow: var(--shadow-sm);\n    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;\n  }\n  #farbe-blau .card:hover {\n    transform: translateY(-3px);\n    box-shadow: var(--shadow-lg);\n    border-color: #d4dbea;\n  }\n\n  #farbe-blau .card h3 {\n    font-size: 1.05rem;\n    font-weight: 700;\n    color: var(--blue-900);\n    margin-bottom: 8px;\n  }\n\n  #farbe-blau .bullet {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    display: grid;\n    gap: 8px;\n  }\n  #farbe-blau .bullet li {\n    display: grid;\n    grid-template-columns: 18px 1fr;\n    align-items: start;\n    gap: 10px;\n    color: var(--ink);\n  }\n  #farbe-blau .bullet li::before {\n    content: \"\";\n    width: 12px;\n    height: 12px;\n    border: 2px solid var(--blue-900);\n    border-left: 0;\n    border-top: 0;\n    transform: rotate(45deg);\n    margin-top: 4px;\n  }\n\n  \/* Tipp-Box *\/\n  #farbe-blau .tip-box {\n    background: #fff;\n    border: 1px solid #e6ebf4;\n    border-left: 4px solid var(--blue-900); \/* jetzt auch blau *\/\n    border-radius: 14px;\n    padding: 14px;\n    box-shadow: var(--shadow-sm);\n    margin: 20px 0 8px;\n  }\n  #farbe-blau .tip-head {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: .95rem;\n  }\n  #farbe-blau .tip-dot {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: var(--blue-900);\n    box-shadow: 0 0 0 4px rgba(36,59,107,.08);\n  }\n  #farbe-blau .tip-head strong {\n    color: var(--blue-900);\n  }\n\n  #farbe-blau .swatches {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 12px;\n    margin: 10px 0 6px;\n  }\n  @media (max-width: 480px) {\n    #farbe-blau .swatches { grid-template-columns: 1fr; }\n  }\n\n  #farbe-blau .swatch-item {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: #fff;\n    border: 1px solid #eceff5;\n    border-radius: 12px;\n    padding: 10px 12px;\n    cursor: pointer;\n    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;\n  }\n  #farbe-blau .swatch-item:hover {\n    transform: translateY(-2px);\n    border-color: #dfe5f0;\n    box-shadow: 0 10px 22px rgba(12,12,13,0.08);\n  }\n\n  #farbe-blau .swatch {\n    width: 28px;\n    height: 28px;\n    border-radius: 7px;\n    background: var(--c);\n    border: 1px solid rgba(0,0,0,0.07);\n    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);\n  }\n  #farbe-blau .hex {\n    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n    font-size: .86rem;\n    color: #1f2937;\n  }\n  #farbe-blau .name {\n    font-size: .86rem;\n    color: #4b5563;\n  }\n\n  #farbe-blau .mini-tip {\n    font-size: 0.9rem;\n    color: #374151;\n    margin-top: 4px;\n  }\n  #farbe-blau .copy-hint {\n    margin-top: 2px;\n    font-size: .82rem;\n    color: #6b7280;\n  }\n<\/style>\n\n<script>\n  (function () {\n    const root = document.querySelector(\"#farbe-blau\");\n    if (!root || !navigator.clipboard) return;\n    const hint = root.querySelector(\".copy-hint\");\n    root.querySelectorAll(\".swatch-item[data-hex]\").forEach(btn =&gt; {\n      btn.addEventListener(\"click\", async () =&gt; {\n        const hex = btn.getAttribute(\"data-hex\");\n        try {\n          await navigator.clipboard.writeText(hex);\n          if (hint) {\n            hint.textContent = hex + \" kopiert\";\n            setTimeout(() =&gt; (hint.textContent = \"\"), 1500);\n          }\n        } catch {}\n      });\n    });\n  })();\n<\/script>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6dc02ff elementor-widget elementor-widget-text-editor\" data-id=\"6dc02ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"farbe-gelb\" class=\"bsc-domain\" aria-labelledby=\"farbe-gelb-title\">\n  <div class=\"wrap\">\n    <header class=\"head\">\n      <h2 id=\"farbe-gelb-title\">Yellow in web design: effect, meaning &amp; combinations #FFD700<\/h2>\n      <p class=\"lead\">\n  Yellow has a friendly, optimistic and attention-grabbing effect. It conveys warmth, energy and can accelerate decisions &#8211; ideal for highlights. \n      <\/p>\n    <\/header>\n\n    <div class=\"color-grid\">\n      <article class=\"card\">\n        <h3>Effect<\/h3>\n        <ul class=\"bullet\">\n          <li>radiates optimism, lightness and energy<\/li>\n          <li>draws attention to CTAs &amp; badges<\/li>\n          <li>Warm and inviting, promotes a positive mood<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>When to use<\/h3>\n        <ul class=\"bullet\">\n          <li>for price\/promo information, CTAs, onboarding<\/li>\n          <li>with cheerful brands &amp; lifestyle offers<\/li>\n          <li>for quick orientation in lists\/maps<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Less suitable<\/h3>\n        <ul class=\"bullet\">\n          <li>in a primary role in strictly serious B2B environments<\/li>\n          <li>overdosed, it quickly appears &#8220;cheap&#8221;\/overloaded<\/li>\n          <li>for serious topics (law, authorities)<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Typical industries<\/h3>\n        <ul class=\"bullet\">\n          <li>Food, Delivery, Leisure &amp; Tourism<\/li>\n          <li>Children&#8217;s\/EdTech, education through play<\/li>\n          <li>E-commerce, events, promotions<\/li>\n        <\/ul>\n      <\/article>\n    <\/div>\n\n    <aside class=\"tip-box\" aria-label=\"Farbkombinationen Tipp\">\n      <div class=\"tip-head\">\n        <span class=\"tip-dot\" aria-hidden=\"true\"><\/span>\n        <strong>Tip:<\/strong> Yellow harmonizes particularly well with:\n      <\/div>\n      <div class=\"swatches labeled\">\n        <button class=\"swatch-item\" data-hex=\"#FFFFFF\"><span class=\"swatch\" style=\"--c:#FFFFFF\"><\/span><span class=\"hex\">#FFFFFF<\/span><span class=\"name\">White<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#243B6B\"><span class=\"swatch\" style=\"--c:#243B6B\"><\/span><span class=\"hex\">#243B6B<\/span><span class=\"name\">Dark blue<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#1F2937\"><span class=\"swatch\" style=\"--c:#1F2937\"><\/span><span class=\"hex\">#1F2937<\/span><span class=\"name\">Anthracite<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#F3F4F6\"><span class=\"swatch\" style=\"--c:#F3F4F6\"><\/span><span class=\"hex\">#F3F4F6<\/span><span class=\"name\">Light gray<\/span><\/button>\n      <\/div>\n      <p class=\"mini-tip\">Yellow needs contrast: clear with dark blue\/anthracite, friendly with white\/light gray.<\/p>\n      <p class=\"copy-hint\" role=\"status\" aria-live=\"polite\"><\/p>\n    <\/aside>\n  <\/div>\n<\/section>\n\n<style>\n#farbe-gelb { --accent:#FFD700; --ring:#e8e5da; --ink:#0f172a; --muted:#4b5563; --card:#ffffff; --shadow-sm:0 2px 10px rgba(12,12,13,.06); --shadow-lg:0 14px 34px rgba(12,12,13,.12); font-family:\"Sora\",system-ui,sans-serif;}\n#farbe-gelb .wrap{max-width:920px;margin:0 auto;padding:24px 16px 16px}\n#farbe-gelb .head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:800;line-height:1.2;margin:1.2rem 0 .4rem}\n#farbe-gelb .lead{font-size:1.02rem;color:var(--muted);max-width:60ch}\n#farbe-gelb .color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:1rem}\n#farbe-gelb .card{border:1px solid var(--ring);border-radius:16px;background:var(--card);padding:16px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}\n#farbe-gelb .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#e2d9b0}\n#farbe-gelb .card h3{font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:8px}\n#farbe-gelb .bullet{list-style:none;margin:0;padding:0;display:grid;gap:8px}\n#farbe-gelb .bullet li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink)}\n#farbe-gelb .bullet li::before{content:\"\";width:12px;height:12px;border:2px solid var(--accent);border-left:0;border-top:0;transform:rotate(45deg);margin-top:4px}\n#farbe-gelb .tip-box{background:#fff;border:1px solid #efe9c9;border-left:4px solid var(--accent);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);margin:20px 0 8px}\n#farbe-gelb .tip-head{display:flex;align-items:center;gap:10px;font-size:.95rem}\n#farbe-gelb .tip-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,215,0,.18)}\n#farbe-gelb .tip-head strong{color:var(--accent)}\n#farbe-gelb .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 6px}\n@media (max-width:480px){#farbe-gelb .swatches{grid-template-columns:1fr}}\n#farbe-gelb .swatch-item{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #eceff5;border-radius:12px;padding:10px 12px;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s}\n#farbe-gelb .swatch-item:hover{transform:translateY(-2px);border-color:#e6e6e6;box-shadow:0 10px 22px rgba(12,12,13,.08)}\n#farbe-gelb .swatch{width:28px;height:28px;border-radius:7px;background:var(--c);border:1px solid rgba(0,0,0,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}\n#farbe-gelb .hex{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;color:#1f2937}\n#farbe-gelb .name{font-size:.86rem;color:var(--muted)}\n#farbe-gelb .mini-tip{font-size:.9rem;color:#374151;margin-top:4px}\n#farbe-gelb .copy-hint{margin-top:2px;font-size:.82rem;color:#6b7280}\n<\/style>\n\n<script>\n(()=&gt;{const r=document.querySelector(\"#farbe-gelb\");if(!r||!navigator.clipboard)return;const h=r.querySelector(\".copy-hint\");r.querySelectorAll(\".swatch-item[data-hex]\").forEach(b=&gt;{b.addEventListener(\"click\",async()=&gt;{const x=b.getAttribute(\"data-hex\");try{await navigator.clipboard.writeText(x);if(h){h.textContent=x+\" kopiert\";setTimeout(()=&gt;h.textContent=\"\",1500)}}catch{}})})})();\n<\/script>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9cf0335 elementor-widget elementor-widget-text-editor\" data-id=\"9cf0335\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"farbe-gruen\" class=\"bsc-domain\" aria-labelledby=\"farbe-gruen-title\">\n  <div class=\"wrap\">\n    <header class=\"head\">\n      <h2 id=\"farbe-gruen-title\">Green in web design: effect, meaning &amp; combinations #008000<\/h2>\n      <p class=\"lead\">\n  Green stands for nature, balance and trust. It has a calming, focused effect and is ideal for sustainable or health-related topics. \n      <\/p>\n    <\/header>\n\n    <div class=\"color-grid\">\n      <article class=\"card\">\n        <h3>Effect<\/h3>\n        <ul class=\"bullet\">\n          <li>conveys calm, balance and naturalness<\/li>\n          <li>associates health, growth &amp; sustainability<\/li>\n          <li>has a stabilizing effect in data-heavy UIs<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>When to use<\/h3>\n        <ul class=\"bullet\">\n          <li>for eco\/organic topics, health &amp; wellness pages<\/li>\n          <li>as success\/confirmation color in forms<\/li>\n          <li>for serious, down-to-earth brand appearances<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Less suitable<\/h3>\n        <ul class=\"bullet\">\n          <li>for high-energy\/tech brands as primary color<\/li>\n          <li>for very luxurious, glamorous productions<\/li>\n          <li>when strong urgency\/action is required<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Typical industries<\/h3>\n        <ul class=\"bullet\">\n          <li>Sustainability, environment &amp; non-profit<\/li>\n          <li>Health, fitness, nutrition<\/li>\n          <li>Finance, education, consulting<\/li>\n        <\/ul>\n      <\/article>\n    <\/div>\n\n    <aside class=\"tip-box\" aria-label=\"Farbkombinationen Tipp\">\n      <div class=\"tip-head\">\n        <span class=\"tip-dot\" aria-hidden=\"true\"><\/span>\n        <strong>Tip:<\/strong> Green harmonizes particularly well with:\n      <\/div>\n      <div class=\"swatches labeled\">\n        <button class=\"swatch-item\" data-hex=\"#FFFFFF\"><span class=\"swatch\" style=\"--c:#FFFFFF\"><\/span><span class=\"hex\">#FFFFFF<\/span><span class=\"name\">White<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#F3F4F6\"><span class=\"swatch\" style=\"--c:#F3F4F6\"><\/span><span class=\"hex\">#F3F4F6<\/span><span class=\"name\">Light gray<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#243B6B\"><span class=\"swatch\" style=\"--c:#243B6B\"><\/span><span class=\"hex\">#243B6B<\/span><span class=\"name\">Dark blue<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#F5F5DC\"><span class=\"swatch\" style=\"--c:#F5F5DC\"><\/span><span class=\"hex\">#F5F5DC<\/span><span class=\"name\">Beige<\/span><\/button>\n      <\/div>\n      <p class=\"mini-tip\">Green plus white\/light gray = clean; dark blue\/beige bring depth &amp; warmth.<\/p>\n      <p class=\"copy-hint\" role=\"status\" aria-live=\"polite\"><\/p>\n    <\/aside>\n  <\/div>\n<\/section>\n\n<style>\n#farbe-gruen { --accent:#008000; --ring:#dfeee3; --ink:#0f172a; --muted:#4b5563; --card:#ffffff; --shadow-sm:0 2px 10px rgba(12,12,13,.06); --shadow-lg:0 14px 34px rgba(12,12,13,.12); font-family:\"Sora\",system-ui,sans-serif;}\n#farbe-gruen .wrap{max-width:920px;margin:0 auto;padding:24px 16px 16px}\n#farbe-gruen .head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:800;line-height:1.2;margin:1.2rem 0 .4rem}\n#farbe-gruen .lead{font-size:1.02rem;color:var(--muted);max-width:60ch}\n#farbe-gruen .color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:1rem}\n#farbe-gruen .card{border:1px solid var(--ring);border-radius:16px;background:var(--card);padding:16px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}\n#farbe-gruen .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#cfe5d3}\n#farbe-gruen .card h3{font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:8px}\n#farbe-gruen .bullet{list-style:none;margin:0;padding:0;display:grid;gap:8px}\n#farbe-gruen .bullet li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink)}\n#farbe-gruen .bullet li::before{content:\"\";width:12px;height:12px;border:2px solid var(--accent);border-left:0;border-top:0;transform:rotate(45deg);margin-top:4px}\n#farbe-gruen .tip-box{background:#fff;border:1px solid #dfeee3;border-left:4px solid var(--accent);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);margin:20px 0 8px}\n#farbe-gruen .tip-head{display:flex;align-items:center;gap:10px;font-size:.95rem}\n#farbe-gruen .tip-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(0,128,0,.15)}\n#farbe-gruen .tip-head strong{color:var(--accent)}\n#farbe-gruen .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 6px}\n@media (max-width:480px){#farbe-gruen .swatches{grid-template-columns:1fr}}\n#farbe-gruen .swatch-item{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #eceff5;border-radius:12px;padding:10px 12px;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s}\n#farbe-gruen .swatch-item:hover{transform:translateY(-2px);border-color:#dfe5f0;box-shadow:0 10px 22px rgba(12,12,13,.08)}\n#farbe-gruen .swatch{width:28px;height:28px;border-radius:7px;background:var(--c);border:1px solid rgba(0,0,0,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}\n#farbe-gruen .hex{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;color:#1f2937}\n#farbe-gruen .name{font-size:.86rem;color:var(--muted)}\n#farbe-gruen .mini-tip{font-size:.9rem;color:#374151;margin-top:4px}\n#farbe-gruen .copy-hint{margin-top:2px;font-size:.82rem;color:#6b7280}\n<\/style>\n\n<script>\n(()=&gt;{const r=document.querySelector(\"#farbe-gruen\");if(!r||!navigator.clipboard)return;const h=r.querySelector(\".copy-hint\");r.querySelectorAll(\".swatch-item[data-hex]\").forEach(b=&gt;{b.addEventListener(\"click\",async()=&gt;{const x=b.getAttribute(\"data-hex\");try{await navigator.clipboard.writeText(x);if(h){h.textContent=x+\" kopiert\";setTimeout(()=&gt;h.textContent=\"\",1500)}}catch{}})})})();\n<\/script>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b67eb25 elementor-widget elementor-widget-text-editor\" data-id=\"b67eb25\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"farbe-orange\" class=\"bsc-domain\" aria-labelledby=\"farbe-orange-title\">\n  <div class=\"wrap\">\n    <header class=\"head\">\n      <h2 id=\"farbe-orange-title\">Orange in web design: effect, meaning &amp; combinations #F28020<\/h2>\n      <p class=\"lead\">\n  Orange is activating, friendly and conversion-boosting. It signals creativity and drive &#8211; perfect for CTAs and promotions. \n      <\/p>\n    <\/header>\n\n    <div class=\"color-grid\">\n      <article class=\"card\">\n        <h3>Effect<\/h3>\n        <ul class=\"bullet\">\n          <li>has a motivating, cheerful and accessible effect<\/li>\n          <li>Strengthens interaction &amp; willingness to click<\/li>\n          <li>creates warmth without aggressiveness<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>When to use<\/h3>\n        <ul class=\"bullet\">\n          <li>for CTAs, onboarding, promotions &amp; badges<\/li>\n          <li>in apps\/SaaS for active states<\/li>\n          <li>for young, creative brands<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Less suitable<\/h3>\n        <ul class=\"bullet\">\n          <li>in very formal\/official contexts<\/li>\n          <li>with conservative B2B as primary color<\/li>\n          <li>overdosed, it can have a &#8220;hectic&#8221; effect<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Typical industries<\/h3>\n        <ul class=\"bullet\">\n          <li>E-Commerce, Events, Entertainment<\/li>\n          <li>Apps &amp; SaaS, Education<\/li>\n          <li>Startups, creative industries<\/li>\n        <\/ul>\n      <\/article>\n    <\/div>\n\n    <aside class=\"tip-box\" aria-label=\"Farbkombinationen Tipp\">\n      <div class=\"tip-head\">\n        <span class=\"tip-dot\" aria-hidden=\"true\"><\/span>\n        <strong>Tip:<\/strong> Orange harmonizes particularly well with:\n      <\/div>\n      <div class=\"swatches labeled\">\n        <button class=\"swatch-item\" data-hex=\"#FFFFFF\"><span class=\"swatch\" style=\"--c:#FFFFFF\"><\/span><span class=\"hex\">#FFFFFF<\/span><span class=\"name\">White<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#243B6B\"><span class=\"swatch\" style=\"--c:#243B6B\"><\/span><span class=\"hex\">#243B6B<\/span><span class=\"name\">Dark blue<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#1F2937\"><span class=\"swatch\" style=\"--c:#1F2937\"><\/span><span class=\"hex\">#1F2937<\/span><span class=\"name\">Anthracite<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#FFF7ED\"><span class=\"swatch\" style=\"--c:#FFF7ED\"><\/span><span class=\"hex\">#FFF7ED<\/span><span class=\"name\">Cream<\/span><\/button>\n      <\/div>\n      <p class=\"mini-tip\">Strong contrast with dark blue; soft and modern with white\/cream.<\/p>\n      <p class=\"copy-hint\" role=\"status\" aria-live=\"polite\"><\/p>\n    <\/aside>\n  <\/div>\n<\/section>\n\n<style>\n#farbe-orange { --accent:#F28020; --ring:#f2e5d8; --ink:#0f172a; --muted:#4b5563; --card:#ffffff; --shadow-sm:0 2px 10px rgba(12,12,13,.06); --shadow-lg:0 14px 34px rgba(12,12,13,.12); font-family:\"Sora\",system-ui,sans-serif;}\n#farbe-orange .wrap{max-width:920px;margin:0 auto;padding:24px 16px 16px}\n#farbe-orange .head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:800;line-height:1.2;margin:1.2rem 0 .4rem}\n#farbe-orange .lead{font-size:1.02rem;color:var(--muted);max-width:60ch}\n#farbe-orange .color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:1rem}\n#farbe-orange .card{border:1px solid var(--ring);border-radius:16px;background:var(--card);padding:16px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}\n#farbe-orange .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#f0d1b6}\n#farbe-orange .card h3{font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:8px}\n#farbe-orange .bullet{list-style:none;margin:0;padding:0;display:grid;gap:8px}\n#farbe-orange .bullet li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink)}\n#farbe-orange .bullet li::before{content:\"\";width:12px;height:12px;border:2px solid var(--accent);border-left:0;border-top:0;transform:rotate(45deg);margin-top:4px}\n#farbe-orange .tip-box{background:#fff;border:1px solid #f3e4d9;border-left:4px solid var(--accent);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);margin:20px 0 8px}\n#farbe-orange .tip-head{display:flex;align-items:center;gap:10px;font-size:.95rem}\n#farbe-orange .tip-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(242,128,32,.18)}\n#farbe-orange .tip-head strong{color:var(--accent)}\n#farbe-orange .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 6px}\n@media (max-width:480px){#farbe-orange .swatches{grid-template-columns:1fr}}\n#farbe-orange .swatch-item{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #eceff5;border-radius:12px;padding:10px 12px;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s}\n#farbe-orange .swatch-item:hover{transform:translateY(-2px);border-color:#dfe5f0;box-shadow:0 10px 22px rgba(12,12,13,.08)}\n#farbe-orange .swatch{width:28px;height:28px;border-radius:7px;background:var(--c);border:1px solid rgba(0,0,0,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}\n#farbe-orange .hex{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;color:#1f2937}\n#farbe-orange .name{font-size:.86rem;color:var(--muted)}\n#farbe-orange .mini-tip{font-size:.9rem;color:#374151;margin-top:4px}\n#farbe-orange .copy-hint{margin-top:2px;font-size:.82rem;color:#6b7280}\n<\/style>\n\n<script>\n(()=&gt;{const r=document.querySelector(\"#farbe-orange\");if(!r||!navigator.clipboard)return;const h=r.querySelector(\".copy-hint\");r.querySelectorAll(\".swatch-item[data-hex]\").forEach(b=&gt;{b.addEventListener(\"click\",async()=&gt;{const x=b.getAttribute(\"data-hex\");try{await navigator.clipboard.writeText(x);if(h){h.textContent=x+\" kopiert\";setTimeout(()=&gt;h.textContent=\"\",1500)}}catch{}})})})();\n<\/script>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28a33c9 elementor-widget elementor-widget-text-editor\" data-id=\"28a33c9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"farbe-tuerkis\" class=\"bsc-domain\" aria-labelledby=\"farbe-tuerkis-title\">\n  <div class=\"wrap\">\n    <header class=\"head\">\n      <h2 id=\"farbe-tuerkis-title\">Turquoise in web design: effect, meaning &amp; combinations #17A2B8<\/h2>\n      <p class=\"lead\">\n  Turquoise looks fresh, modern and precise &#8211; between blue (trust) and green (balance). Ideal for clear interfaces and health\/tech contexts. \n      <\/p>\n    <\/header>\n\n    <div class=\"color-grid\">\n      <article class=\"card\">\n        <h3>Effect<\/h3>\n        <ul class=\"bullet\">\n          <li>Fresh, clean and competent<\/li>\n          <li>Signals modernity &amp; digital proximity<\/li>\n          <li>Promotes clarity in complex UIs<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>When to use<\/h3>\n        <ul class=\"bullet\">\n          <li>for buttons, badges &amp; info boxes<\/li>\n          <li>in SaaS\/Medicine\/Wellness<\/li>\n          <li>for structure on data-driven pages<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Less suitable<\/h3>\n        <ul class=\"bullet\">\n          <li>for rustic\/traditional brand worlds<\/li>\n          <li>with very warm, emotional storytelling<\/li>\n          <li>when &#8220;cozy&#8221; is more important than &#8220;clean&#8221;<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Typical industries<\/h3>\n        <ul class=\"bullet\">\n          <li>SaaS, IT &amp; Consulting<\/li>\n          <li>Medicine, wellness, fitness<\/li>\n          <li>Education, public information<\/li>\n        <\/ul>\n      <\/article>\n    <\/div>\n\n    <aside class=\"tip-box\" aria-label=\"Farbkombinationen Tipp\">\n      <div class=\"tip-head\">\n        <span class=\"tip-dot\" aria-hidden=\"true\"><\/span>\n        <strong>Tip:<\/strong> Turquoise harmonizes particularly well with:\n      <\/div>\n      <div class=\"swatches labeled\">\n        <button class=\"swatch-item\" data-hex=\"#FFFFFF\"><span class=\"swatch\" style=\"--c:#FFFFFF\"><\/span><span class=\"hex\">#FFFFFF<\/span><span class=\"name\">White<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#243B6B\"><span class=\"swatch\" style=\"--c:#243B6B\"><\/span><span class=\"hex\">#243B6B<\/span><span class=\"name\">Dark blue<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#F3F4F6\"><span class=\"swatch\" style=\"--c:#F3F4F6\"><\/span><span class=\"hex\">#F3F4F6<\/span><span class=\"name\">Light gray<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#0A2540\"><span class=\"swatch\" style=\"--c:#0A2540\"><\/span><span class=\"hex\">#0A2540<\/span><span class=\"name\">Navy<\/span><\/button>\n      <\/div>\n      <p class=\"mini-tip\">Turquoise + white\/light gray = clinically clear; with navy\/dark blue serious &amp; modern.<\/p>\n      <p class=\"copy-hint\" role=\"status\" aria-live=\"polite\"><\/p>\n    <\/aside>\n  <\/div>\n<\/section>\n\n<style>\n#farbe-tuerkis { --accent:#17A2B8; --ring:#dbeff3; --ink:#0f172a; --muted:#4b5563; --card:#ffffff; --shadow-sm:0 2px 10px rgba(12,12,13,.06); --shadow-lg:0 14px 34px rgba(12,12,13,.12); font-family:\"Sora\",system-ui,sans-serif;}\n#farbe-tuerkis .wrap{max-width:920px;margin:0 auto;padding:24px 16px 16px}\n#farbe-tuerkis .head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:800;line-height:1.2;margin:1.2rem 0 .4rem}\n#farbe-tuerkis .lead{font-size:1.02rem;color:var(--muted);max-width:60ch}\n#farbe-tuerkis .color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:1rem}\n#farbe-tuerkis .card{border:1px solid var(--ring);border-radius:16px;background:var(--card);padding:16px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}\n#farbe-tuerkis .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#c9e7ed}\n#farbe-tuerkis .card h3{font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:8px}\n#farbe-tuerkis .bullet{list-style:none;margin:0;padding:0;display:grid;gap:8px}\n#farbe-tuerkis .bullet li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink)}\n#farbe-tuerkis .bullet li::before{content:\"\";width:12px;height:12px;border:2px solid var(--accent);border-left:0;border-top:0;transform:rotate(45deg);margin-top:4px}\n#farbe-tuerkis .tip-box{background:#fff;border:1px solid #dbeff3;border-left:4px solid var(--accent);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);margin:20px 0 8px}\n#farbe-tuerkis .tip-head{display:flex;align-items:center;gap:10px;font-size:.95rem}\n#farbe-tuerkis .tip-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(23,162,184,.18)}\n#farbe-tuerkis .tip-head strong{color:var(--accent)}\n#farbe-tuerkis .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 6px}\n@media (max-width:480px){#farbe-tuerkis .swatches{grid-template-columns:1fr}}\n#farbe-tuerkis .swatch-item{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #eceff5;border-radius:12px;padding:10px 12px;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s}\n#farbe-tuerkis .swatch-item:hover{transform:translateY(-2px);border-color:#dfe5f0;box-shadow:0 10px 22px rgba(12,12,13,.08)}\n#farbe-tuerkis .swatch{width:28px;height:28px;border-radius:7px;background:var(--c);border:1px solid rgba(0,0,0,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}\n#farbe-tuerkis .hex{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;color:#1f2937}\n#farbe-tuerkis .name{font-size:.86rem;color:var(--muted)}\n#farbe-tuerkis .mini-tip{font-size:.9rem;color:#374151;margin-top:4px}\n#farbe-tuerkis .copy-hint{margin-top:2px;font-size:.82rem;color:#6b7280}\n<\/style>\n\n<script>\n(()=&gt;{const r=document.querySelector(\"#farbe-tuerkis\");if(!r||!navigator.clipboard)return;const h=r.querySelector(\".copy-hint\");r.querySelectorAll(\".swatch-item[data-hex]\").forEach(b=&gt;{b.addEventListener(\"click\",async()=&gt;{const x=b.getAttribute(\"data-hex\");try{await navigator.clipboard.writeText(x);if(h){h.textContent=x+\" kopiert\";setTimeout(()=&gt;h.textContent=\"\",1500)}}catch{}})})})();\n<\/script>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c6154f8 elementor-widget elementor-widget-text-editor\" data-id=\"c6154f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"farbe-rot\" class=\"bsc-domain\" aria-labelledby=\"farbe-rot-title\">\n  <div class=\"wrap\">\n    <header class=\"head\">\n      <h2 id=\"farbe-rot-title\">Red in web design: effect, meaning &amp; combinations #FF0000<\/h2>\n      <p class=\"lead\">\n  Red stands for energy, urgency and strong emotions. It attracts attention and is suitable for warnings, sales and deadlines. \n      <\/p>\n    <\/header>\n\n    <div class=\"color-grid\">\n      <article class=\"card\">\n        <h3>Effect<\/h3>\n        <ul class=\"bullet\">\n          <li>Maximum attention &amp; dynamics<\/li>\n          <li>emotional, powerful, impulsive<\/li>\n          <li>Transports urgency &amp; action<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>When to use<\/h3>\n        <ul class=\"bullet\">\n          <li>for warnings, error states, deadlines<\/li>\n          <li>for sales\/discount elements<\/li>\n          <li>specifically for accentuations\/CTAs<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Less suitable<\/h3>\n        <ul class=\"bullet\">\n          <li>for quiet, confidence-building pages<\/li>\n          <li>in the healthcare context as a primary color<\/li>\n          <li>overdosed it has a stressful effect<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Typical industries<\/h3>\n        <ul class=\"bullet\">\n          <li>Sport, Entertainment, Retail<\/li>\n          <li>Automotive, Food (Action\/Spice)<\/li>\n          <li>Campaigns, promotions<\/li>\n        <\/ul>\n      <\/article>\n    <\/div>\n\n    <aside class=\"tip-box\" aria-label=\"Farbkombinationen Tipp\">\n      <div class=\"tip-head\">\n        <span class=\"tip-dot\" aria-hidden=\"true\"><\/span>\n        <strong>Tip:<\/strong> Red harmonizes particularly well with:\n      <\/div>\n      <div class=\"swatches labeled\">\n        <button class=\"swatch-item\" data-hex=\"#FFFFFF\"><span class=\"swatch\" style=\"--c:#FFFFFF\"><\/span><span class=\"hex\">#FFFFFF<\/span><span class=\"name\">White<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#000000\"><span class=\"swatch\" style=\"--c:#000000\"><\/span><span class=\"hex\">#000000<\/span><span class=\"name\">Black<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#F3F4F6\"><span class=\"swatch\" style=\"--c:#F3F4F6\"><\/span><span class=\"hex\">#F3F4F6<\/span><span class=\"name\">Light gray<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#243B6B\"><span class=\"swatch\" style=\"--c:#243B6B\"><\/span><span class=\"hex\">#243B6B<\/span><span class=\"name\">Dark blue<\/span><\/button>\n      <\/div>\n      <p class=\"mini-tip\">Clear and strong with white\/black; serious and rich in contrast with dark blue.<\/p>\n      <p class=\"copy-hint\" role=\"status\" aria-live=\"polite\"><\/p>\n    <\/aside>\n  <\/div>\n<\/section>\n\n<style>\n#farbe-rot { --accent:#FF0000; --ring:#f2dada; --ink:#0f172a; --muted:#4b5563; --card:#ffffff; --shadow-sm:0 2px 10px rgba(12,12,13,.06); --shadow-lg:0 14px 34px rgba(12,12,13,.12); font-family:\"Sora\",system-ui,sans-serif;}\n#farbe-rot .wrap{max-width:920px;margin:0 auto;padding:24px 16px 16px}\n#farbe-rot .head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:800;line-height:1.2;margin:1.2rem 0 .4rem}\n#farbe-rot .lead{font-size:1.02rem;color:var(--muted);max-width:60ch}\n#farbe-rot .color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:1rem}\n#farbe-rot .card{border:1px solid var(--ring);border-radius:16px;background:var(--card);padding:16px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}\n#farbe-rot .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#eebcbc}\n#farbe-rot .card h3{font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:8px}\n#farbe-rot .bullet{list-style:none;margin:0;padding:0;display:grid;gap:8px}\n#farbe-rot .bullet li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink)}\n#farbe-rot .bullet li::before{content:\"\";width:12px;height:12px;border:2px solid var(--accent);border-left:0;border-top:0;transform:rotate(45deg);margin-top:4px}\n#farbe-rot .tip-box{background:#fff;border:1px solid #f2dada;border-left:4px solid var(--accent);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);margin:20px 0 8px}\n#farbe-rot .tip-head{display:flex;align-items:center;gap:10px;font-size:.95rem}\n#farbe-rot .tip-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,0,0,.18)}\n#farbe-rot .tip-head strong{color:var(--accent)}\n#farbe-rot .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 6px}\n@media (max-width:480px){#farbe-rot .swatches{grid-template-columns:1fr}}\n#farbe-rot .swatch-item{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #eceff5;border-radius:12px;padding:10px 12px;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s}\n#farbe-rot .swatch-item:hover{transform:translateY(-2px);border-color:#dfe5f0;box-shadow:0 10px 22px rgba(12,12,13,.08)}\n#farbe-rot .swatch{width:28px;height:28px;border-radius:7px;background:var(--c);border:1px solid rgba(0,0,0,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}\n#farbe-rot .hex{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;color:#1f2937}\n#farbe-rot .name{font-size:.86rem;color:var(--muted)}\n#farbe-rot .mini-tip{font-size:.9rem;color:#374151;margin-top:4px}\n#farbe-rot .copy-hint{margin-top:2px;font-size:.82rem;color:#6b7280}\n<\/style>\n\n<script>\n(()=&gt;{const r=document.querySelector(\"#farbe-rot\");if(!r||!navigator.clipboard)return;const h=r.querySelector(\".copy-hint\");r.querySelectorAll(\".swatch-item[data-hex]\").forEach(b=&gt;{b.addEventListener(\"click\",async()=&gt;{const x=b.getAttribute(\"data-hex\");try{await navigator.clipboard.writeText(x);if(h){h.textContent=x+\" kopiert\";setTimeout(()=&gt;h.textContent=\"\",1500)}}catch{}})})})();\n<\/script>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10c7fce elementor-widget elementor-widget-text-editor\" data-id=\"10c7fce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"farbe-pink\" class=\"bsc-domain\" aria-labelledby=\"farbe-pink-title\">\n  <div class=\"wrap\">\n    <header class=\"head\">\n      <h2 id=\"farbe-pink-title\">Pink in web design: effect, meaning &amp; combinations #FF1493<\/h2>\n      <p class=\"lead\">\n  Pink is playful, creative and modern. It attracts attention, has an expressive effect and is suitable for lifestyle, beauty and communities. \n      <\/p>\n    <\/header>\n\n    <div class=\"color-grid\">\n      <article class=\"card\">\n        <h3>Effect<\/h3>\n        <ul class=\"bullet\">\n          <li>lively, friendly, self-confident<\/li>\n          <li>creative &amp; often with a &#8220;social&#8221; connotation<\/li>\n          <li>sets strong accents in UI elements<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>When to use<\/h3>\n        <ul class=\"bullet\">\n          <li>for brand eye-catchers, CTAs &amp; badges<\/li>\n          <li>for lifestyle\/beauty\/event content<\/li>\n          <li>when personality should be tangible<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Less suitable<\/h3>\n        <ul class=\"bullet\">\n          <li>for a very conservative B2B environment<\/li>\n          <li>with sober, factual portals<\/li>\n          <li>overdosed, it can appear dubious<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Typical industries<\/h3>\n        <ul class=\"bullet\">\n          <li>Beauty, Fashion, Events<\/li>\n          <li>Creator Economy, Communities<\/li>\n          <li>Lifestyle blogs &amp; magazines<\/li>\n        <\/ul>\n      <\/article>\n    <\/div>\n\n    <aside class=\"tip-box\" aria-label=\"Farbkombinationen Tipp\">\n      <div class=\"tip-head\">\n        <span class=\"tip-dot\" aria-hidden=\"true\"><\/span>\n        <strong>Tip:<\/strong> Pink harmonizes particularly well with:\n      <\/div>\n      <div class=\"swatches labeled\">\n        <button class=\"swatch-item\" data-hex=\"#FFFFFF\"><span class=\"swatch\" style=\"--c:#FFFFFF\"><\/span><span class=\"hex\">#FFFFFF<\/span><span class=\"name\">White<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#1F2937\"><span class=\"swatch\" style=\"--c:#1F2937\"><\/span><span class=\"hex\">#1F2937<\/span><span class=\"name\">Anthracite<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#243B6B\"><span class=\"swatch\" style=\"--c:#243B6B\"><\/span><span class=\"hex\">#243B6B<\/span><span class=\"name\">Dark blue<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#F3F4F6\"><span class=\"swatch\" style=\"--c:#F3F4F6\"><\/span><span class=\"hex\">#F3F4F6<\/span><span class=\"name\">Light gray<\/span><\/button>\n      <\/div>\n      <p class=\"mini-tip\">Pink looks more sophisticated with dark blue\/anthracite; white\/light gray keeps it modern.<\/p>\n      <p class=\"copy-hint\" role=\"status\" aria-live=\"polite\"><\/p>\n    <\/aside>\n  <\/div>\n<\/section>\n\n<style>\n#farbe-pink { --accent:#FF1493; --ring:#f6d5e6; --ink:#0f172a; --muted:#4b5563; --card:#ffffff; --shadow-sm:0 2px 10px rgba(12,12,13,.06); --shadow-lg:0 14px 34px rgba(12,12,13,.12); font-family:\"Sora\",system-ui,sans-serif;}\n#farbe-pink .wrap{max-width:920px;margin:0 auto;padding:24px 16px 16px}\n#farbe-pink .head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:800;line-height:1.2;margin:1.2rem 0 .4rem}\n#farbe-pink .lead{font-size:1.02rem;color:var(--muted);max-width:60ch}\n#farbe-pink .color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:1rem}\n#farbe-pink .card{border:1px solid var(--ring);border-radius:16px;background:var(--card);padding:16px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}\n#farbe-pink .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#efb9d4}\n#farbe-pink .card h3{font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:8px}\n#farbe-pink .bullet{list-style:none;margin:0;padding:0;display:grid;gap:8px}\n#farbe-pink .bullet li::before{content:\"\";width:12px;height:12px;border:2px solid var(--accent);border-left:0;border-top:0;transform:rotate(45deg);margin-top:4px}\n#farbe-pink .bullet li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink)}\n#farbe-pink .tip-box{background:#fff;border:1px solid #f6d5e6;border-left:4px solid var(--accent);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);margin:20px 0 8px}\n#farbe-pink .tip-head{display:flex;align-items:center;gap:10px;font-size:.95rem}\n#farbe-pink .tip-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(255,20,147,.18)}\n#farbe-pink .tip-head strong{color:var(--accent)}\n#farbe-pink .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 6px}\n@media (max-width:480px){#farbe-pink .swatches{grid-template-columns:1fr}}\n#farbe-pink .swatch-item{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #eceff5;border-radius:12px;padding:10px 12px;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s}\n#farbe-pink .swatch-item:hover{transform:translateY(-2px);border-color:#dfe5f0;box-shadow:0 10px 22px rgba(12,12,13,.08)}\n#farbe-pink .swatch{width:28px;height:28px;border-radius:7px;background:var(--c);border:1px solid rgba(0,0,0,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}\n#farbe-pink .hex{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;color:#1f2937}\n#farbe-pink .name{font-size:.86rem;color:var(--muted)}\n#farbe-pink .mini-tip{font-size:.9rem;color:#374151;margin-top:4px}\n#farbe-pink .copy-hint{margin-top:2px;font-size:.82rem;color:#6b7280}\n<\/style>\n\n<script>\n(()=&gt;{const r=document.querySelector(\"#farbe-pink\");if(!r||!navigator.clipboard)return;const h=r.querySelector(\".copy-hint\");r.querySelectorAll(\".swatch-item[data-hex]\").forEach(b=&gt;{b.addEventListener(\"click\",async()=&gt;{const x=b.getAttribute(\"data-hex\");try{await navigator.clipboard.writeText(x);if(h){h.textContent=x+\" kopiert\";setTimeout(()=&gt;h.textContent=\"\",1500)}}catch{}})})})();\n<\/script>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8986ca5 elementor-widget elementor-widget-text-editor\" data-id=\"8986ca5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"farbe-lila\" class=\"bsc-domain\" aria-labelledby=\"farbe-lila-title\">\n  <div class=\"wrap\">\n    <header class=\"head\">\n      <h2 id=\"farbe-lila-title\">Purple in web design: effect, meaning &amp; combinations #800080<\/h2>\n      <p class=\"lead\">\n  Purple stands for creativity, premium &amp; a touch of mysticism. It is suitable for brands with artistic or high-quality aspirations. \n      <\/p>\n    <\/header>\n\n    <div class=\"color-grid\">\n      <article class=\"card\">\n        <h3>Effect<\/h3>\n        <ul class=\"bullet\">\n          <li>creative, inspiring, independent<\/li>\n          <li>looks high-quality\/premium depending on tonality<\/li>\n          <li>sets calm, elegant accents<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>When to use<\/h3>\n        <ul class=\"bullet\">\n          <li>for premium sections &amp; headlines<\/li>\n          <li>in culture, education, creative industries<\/li>\n          <li>if differentiation is desired<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Less suitable<\/h3>\n        <ul class=\"bullet\">\n          <li>for discount\/price focus pages<\/li>\n          <li>with sober utility portals<\/li>\n          <li>overdosed it can appear distant<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Typical industries<\/h3>\n        <ul class=\"bullet\">\n          <li>Culture, education, art<\/li>\n          <li>Luxury &amp; premium services<\/li>\n          <li>Tech start-ups with a design focus<\/li>\n        <\/ul>\n      <\/article>\n    <\/div>\n\n    <aside class=\"tip-box\" aria-label=\"Farbkombinationen Tipp\">\n      <div class=\"tip-head\">\n        <span class=\"tip-dot\" aria-hidden=\"true\"><\/span>\n        <strong>Tip:<\/strong> Purple harmonizes particularly well with:\n      <\/div>\n      <div class=\"swatches labeled\">\n        <button class=\"swatch-item\" data-hex=\"#FFFFFF\"><span class=\"swatch\" style=\"--c:#FFFFFF\"><\/span><span class=\"hex\">#FFFFFF<\/span><span class=\"name\">White<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#F3F4F6\"><span class=\"swatch\" style=\"--c:#F3F4F6\"><\/span><span class=\"hex\">#F3F4F6<\/span><span class=\"name\">Light gray<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#FFD700\"><span class=\"swatch\" style=\"--c:#FFD700\"><\/span><span class=\"hex\">#FFD700<\/span><span class=\"name\">Golden yellow<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#243B6B\"><span class=\"swatch\" style=\"--c:#243B6B\"><\/span><span class=\"hex\">#243B6B<\/span><span class=\"name\">Dark blue<\/span><\/button>\n      <\/div>\n      <p class=\"mini-tip\">Purple + golden yellow look classy; white\/light gray keep the design calm &amp; clear.<\/p>\n      <p class=\"copy-hint\" role=\"status\" aria-live=\"polite\"><\/p>\n    <\/aside>\n  <\/div>\n<\/section>\n\n<style>\n#farbe-lila { --accent:#800080; --ring:#e9d9e9; --ink:#0f172a; --muted:#4b5563; --card:#ffffff; --shadow-sm:0 2px 10px rgba(12,12,13,.06); --shadow-lg:0 14px 34px rgba(12,12,13,.12); font-family:\"Sora\",system-ui,sans-serif;}\n#farbe-lila .wrap{max-width:920px;margin:0 auto;padding:24px 16px 16px}\n#farbe-lila .head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:800;line-height:1.2;margin:1.2rem 0 .4rem}\n#farbe-lila .lead{font-size:1.02rem;color:var(--muted);max-width:60ch}\n#farbe-lila .color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:1rem}\n#farbe-lila .card{border:1px solid var(--ring);border-radius:16px;background:var(--card);padding:16px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}\n#farbe-lila .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#dcc3dc}\n#farbe-lila .card h3{font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:8px}\n#farbe-lila .bullet{list-style:none;margin:0;padding:0;display:grid;gap:8px}\n#farbe-lila .bullet li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink)}\n#farbe-lila .bullet li::before{content:\"\";width:12px;height:12px;border:2px solid var(--accent);border-left:0;border-top:0;transform:rotate(45deg);margin-top:4px}\n#farbe-lila .tip-box{background:#fff;border:1px solid #e9d9e9;border-left:4px solid var(--accent);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);margin:20px 0 8px}\n#farbe-lila .tip-head{display:flex;align-items:center;gap:10px;font-size:.95rem}\n#farbe-lila .tip-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(128,0,128,.18)}\n#farbe-lila .tip-head strong{color:var(--accent)}\n#farbe-lila .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 6px}\n@media (max-width:480px){#farbe-lila .swatches{grid-template-columns:1fr}}\n#farbe-lila .swatch-item{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #eceff5;border-radius:12px;padding:10px 12px;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s}\n#farbe-lila .swatch-item:hover{transform:translateY(-2px);border-color:#dfe5f0;box-shadow:0 10px 22px rgba(12,12,13,.08)}\n#farbe-lila .swatch{width:28px;height:28px;border-radius:7px;background:var(--c);border:1px solid rgba(0,0,0,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}\n#farbe-lila .hex{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;color:#1f2937}\n#farbe-lila .name{font-size:.86rem;color:var(--muted)}\n#farbe-lila .mini-tip{font-size:.9rem;color:#374151;margin-top:4px}\n#farbe-lila .copy-hint{margin-top:2px;font-size:.82rem;color:#6b7280}\n<\/style>\n\n<script>\n(()=&gt;{const r=document.querySelector(\"#farbe-lila\");if(!r||!navigator.clipboard)return;const h=r.querySelector(\".copy-hint\");r.querySelectorAll(\".swatch-item[data-hex]\").forEach(b=&gt;{b.addEventListener(\"click\",async()=&gt;{const x=b.getAttribute(\"data-hex\");try{await navigator.clipboard.writeText(x);if(h){h.textContent=x+\" kopiert\";setTimeout(()=&gt;h.textContent=\"\",1500)}}catch{}})})})();\n<\/script>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a107b57 elementor-widget elementor-widget-text-editor\" data-id=\"a107b57\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"farbe-grau\" class=\"bsc-domain\" aria-labelledby=\"farbe-grau-title\">\n  <div class=\"wrap\">\n    <header class=\"head\">\n      <h2 id=\"farbe-grau-title\">Gray in web design: effect, meaning &amp; combinations #808080<\/h2>\n      <p class=\"lead\">Gray is neutral, factual and minimalist. It makes content appear effective, stabilizes layouts and provides a serious basis. <\/p>\n    <\/header>\n\n    <div class=\"color-grid\">\n      <article class=\"card\">\n        <h3>Effect<\/h3>\n        <ul class=\"bullet\">\n          <li>neutral, professional, reserved<\/li>\n          <li>emphasizes typography &amp; hierarchy<\/li>\n          <li>avoids distraction in content pages<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>When to use<\/h3>\n        <ul class=\"bullet\">\n          <li>as background, divider, secondary buttons<\/li>\n          <li>for minimalist, structured layouts<\/li>\n          <li>in B2B, Documentation, Knowledge bases<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Less suitable<\/h3>\n        <ul class=\"bullet\">\n          <li>for playful, young target groups<\/li>\n          <li>for very emotional campaigns<\/li>\n          <li>quickly monotonous without accent colors<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Typical industries<\/h3>\n        <ul class=\"bullet\">\n          <li>B2B, authorities, consulting<\/li>\n          <li>Tech hardware, SaaS dashboards<\/li>\n          <li>Corporate &amp; Enterprise<\/li>\n        <\/ul>\n      <\/article>\n    <\/div>\n\n    <aside class=\"tip-box\" aria-label=\"Farbkombinationen Tipp\">\n      <div class=\"tip-head\">\n        <strong>Tip:<\/strong> Grey harmonizes particularly well with:\n      <\/div>\n\n      <div class=\"swatches labeled\">\n        <button class=\"swatch-item\" data-hex=\"#FFFFFF\">\n          <span class=\"swatch\" style=\"--c:#FFFFFF\"><\/span>\n          <span class=\"hex\">#FFFFFF<\/span><span class=\"name\">White<\/span>\n        <\/button>\n\n        <button class=\"swatch-item\" data-hex=\"#243B6B\">\n          <span class=\"swatch\" style=\"--c:#243B6B\"><\/span>\n          <span class=\"hex\">#243B6B<\/span><span class=\"name\">Royal blue<\/span>\n        <\/button>\n\n        <button class=\"swatch-item\" data-hex=\"#F28020\">\n          <span class=\"swatch\" style=\"--c:#F28020\"><\/span>\n          <span class=\"hex\">#F28020<\/span><span class=\"name\">Orange<\/span>\n        <\/button>\n\n        <button class=\"swatch-item\" data-hex=\"#17A2B8\">\n          <span class=\"swatch\" style=\"--c:#17A2B8\"><\/span>\n          <span class=\"hex\">#17A2B8<\/span><span class=\"name\">Turquoise<\/span>\n        <\/button>\n      <\/div>\n\n      <p class=\"mini-tip\">Gray comes alive with strong accents (blue\/orange\/turquoise); white keeps it clean.<\/p>\n      <p class=\"copy-hint\" role=\"status\" aria-live=\"polite\"><\/p>\n    <\/aside>\n  <\/div>\n<\/section>\n\n<style>\n  #farbe-grau {\n    --accent:#808080; --ring:#e5e7eb; --ink:#0f172a; --muted:#4b5563; --card:#ffffff;\n    --shadow-sm:0 2px 10px rgba(12,12,13,.06); --shadow-lg:0 14px 34px rgba(12,12,13,.12);\n    font-family:\"Sora\",system-ui,sans-serif;\n  }\n  #farbe-grau .wrap{max-width:920px;margin:0 auto;padding:24px 16px 16px}\n  #farbe-grau .head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:800;line-height:1.2;margin:1.2rem 0 .4rem}\n  #farbe-grau .lead{font-size:1.02rem;color:var(--muted);max-width:60ch}\n\n  #farbe-grau .color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:1rem}\n  #farbe-grau .card{border:1px solid var(--ring);border-radius:16px;background:var(--card);padding:16px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}\n  #farbe-grau .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#d1d5db}\n  #farbe-grau .card h3{font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:8px}\n\n  #farbe-grau .bullet{list-style:none;margin:0;padding:0;display:grid;gap:8px}\n  #farbe-grau .bullet li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink)}\n  #farbe-grau .bullet li::before{content:\"\";width:12px;height:12px;border:2px solid var(--accent);border-left:0;border-top:0;transform:rotate(45deg);margin-top:4px}\n\n  \/* Tipp-Box *\/\n  #farbe-grau .tip-box{background:#fff;border:1px solid #e5e7eb;border-left:4px solid var(--accent);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);margin:20px 0 8px}\n  #farbe-grau .tip-head{display:flex;align-items:center;gap:10px;font-size:.95rem}\n\n  \/* Swatches (Chips) *\/\n  #farbe-grau .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 6px}\n  @media (max-width:480px){#farbe-grau .swatches{grid-template-columns:1fr}}\n  #farbe-grau .swatch-item{\n    display:inline-flex;align-items:center;gap:8px;background:#fff;\n    border:1px solid #eceff5;border-radius:12px;padding:10px 12px;cursor:pointer;\n    transition:transform .16s,box-shadow .16s,border-color .16s;\n  }\n  #farbe-grau .swatch-item:hover{transform:translateY(-2px);border-color:#dfe5f0;box-shadow:0 10px 22px rgba(12,12,13,.08)}\n  #farbe-grau .swatch{\n    width:28px;height:28px;border-radius:7px;background:var(--c);\n    border:1px solid rgba(0,0,0,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);\n  }\n  #farbe-grau .hex{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;color:#1f2937}\n  #farbe-grau .name{font-size:.86rem;color:var(--muted)}\n\n  #farbe-grau .mini-tip{font-size:.9rem;color:#374151;margin-top:4px}\n  #farbe-grau .copy-hint{margin-top:2px;font-size:.82rem;color:#6b7280}\n<\/style>\n\n<script>\n  (() =&gt; {\n    const root = document.querySelector(\"#farbe-grau\");\n    if (!root || !navigator.clipboard) return;\n    const hint = root.querySelector(\".copy-hint\");\n    root.querySelectorAll(\".swatch-item[data-hex]\").forEach(btn =&gt; {\n      btn.addEventListener(\"click\", async () =&gt; {\n        const hex = btn.getAttribute(\"data-hex\");\n        try {\n          await navigator.clipboard.writeText(hex);\n          if (hint) {\n            hint.textContent = hex + \" kopiert\";\n            setTimeout(() =&gt; (hint.textContent = \"\"), 1500);\n          }\n        } catch {}\n      });\n    });\n  })();\n<\/script>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-004bc39 elementor-widget elementor-widget-text-editor\" data-id=\"004bc39\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"farbe-braun\" class=\"bsc-domain\" aria-labelledby=\"farbe-braun-title\">\n  <div class=\"wrap\">\n    <header class=\"head\">\n      <h2 id=\"farbe-braun-title\">Brown in web design: effect, meaning &amp; combinations #8B4513<\/h2>\n      <p class=\"lead\">\n  Brown has an earthy, handcrafted and confidence-inspiring effect. It conveys naturalness, quality and tradition. \n      <\/p>\n    <\/header>\n\n    <div class=\"color-grid\">\n      <article class=\"card\">\n        <h3>Effect<\/h3>\n        <ul class=\"bullet\">\n          <li>natural, warm &amp; down-to-earth<\/li>\n          <li>associated with craftsmanship, quality, grounding<\/li>\n          <li>creates a cozy, serious atmosphere<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>When to use<\/h3>\n        <ul class=\"bullet\">\n          <li>for coffee, delicatessen, natural products<\/li>\n          <li>for craft, interior, furniture<\/li>\n          <li>for &#8220;authentic &amp; close&#8221; positioning<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Less suitable<\/h3>\n        <ul class=\"bullet\">\n          <li>for High-Tech\/SaaS as primary color<\/li>\n          <li>for futuristic, neon-heavy brands<\/li>\n          <li>Too dark can appear &#8220;heavy&#8221;<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Typical industries<\/h3>\n        <ul class=\"bullet\">\n          <li>Gastronomy, coffee, delicatessen<\/li>\n          <li>Craft, Interior, Outdoor<\/li>\n          <li>Manufacture, regional businesses<\/li>\n        <\/ul>\n      <\/article>\n    <\/div>\n\n    <aside class=\"tip-box\" aria-label=\"Farbkombinationen Tipp\">\n      <div class=\"tip-head\">\n        <span class=\"tip-dot\" aria-hidden=\"true\"><\/span>\n        <strong>Tip:<\/strong> Brown harmonizes particularly well with:\n      <\/div>\n      <div class=\"swatches labeled\">\n        <button class=\"swatch-item\" data-hex=\"#F5F5DC\"><span class=\"swatch\" style=\"--c:#F5F5DC\"><\/span><span class=\"hex\">#F5F5DC<\/span><span class=\"name\">Beige<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#FFF7ED\"><span class=\"swatch\" style=\"--c:#FFF7ED\"><\/span><span class=\"hex\">#FFF7ED<\/span><span class=\"name\">Cream<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#FFFFFF\"><span class=\"swatch\" style=\"--c:#FFFFFF\"><\/span><span class=\"hex\">#FFFFFF<\/span><span class=\"name\">White<\/span><\/button>\n        <button class=\"swatch-item\" data-hex=\"#2E7D32\"><span class=\"swatch\" style=\"--c:#2E7D32\"><\/span><span class=\"hex\">#2E7D32<\/span><span class=\"name\">Leaf green<\/span><\/button>\n      <\/div>\n      <p class=\"mini-tip\">Beige\/cream emphasize warmth; white\/green bring freshness &amp; legibility.<\/p>\n      <p class=\"copy-hint\" role=\"status\" aria-live=\"polite\"><\/p>\n    <\/aside>\n  <\/div>\n<\/section>\n\n<style>\n#farbe-braun { --accent:#8B4513; --ring:#eadfd6; --ink:#0f172a; --muted:#4b5563; --card:#ffffff; --shadow-sm:0 2px 10px rgba(12,12,13,.06); --shadow-lg:0 14px 34px rgba(12,12,13,.12); font-family:\"Sora\",system-ui,sans-serif;}\n#farbe-braun .wrap{max-width:920px;margin:0 auto;padding:24px 16px 16px}\n#farbe-braun .head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:800;line-height:1.2;margin:1.2rem 0 .4rem}\n#farbe-braun .lead{font-size:1.02rem;color:var(--muted);max-width:60ch}\n#farbe-braun .color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:1rem}\n#farbe-braun .card{border:1px solid var(--ring);border-radius:16px;background:var(--card);padding:16px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}\n#farbe-braun .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#dac9bd}\n#farbe-braun .card h3{font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:8px}\n#farbe-braun .bullet{list-style:none;margin:0;padding:0;display:grid;gap:8px}\n#farbe-braun .bullet li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink)}\n#farbe-braun .bullet li::before{content:\"\";width:12px;height:12px;border:2px solid var(--accent);border-left:0;border-top:0;transform:rotate(45deg);margin-top:4px}\n#farbe-braun .tip-box{background:#fff;border:1px solid #eadfd6;border-left:4px solid var(--accent);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);margin:20px 0 8px}\n#farbe-braun .tip-head{display:flex;align-items:center;gap:10px;font-size:.95rem}\n#farbe-braun .tip-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(139,69,19,.18)}\n#farbe-braun .tip-head strong{color:var(--accent)}\n#farbe-braun .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 6px}\n@media (max-width:480px){#farbe-braun .swatches{grid-template-columns:1fr}}\n#farbe-braun .swatch-item{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #eceff5;border-radius:12px;padding:10px 12px;cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s}\n#farbe-braun .swatch-item:hover{transform:translateY(-2px);border-color:#dfe5f0;box-shadow:0 10px 22px rgba(12,12,13,.08)}\n#farbe-braun .swatch{width:28px;height:28px;border-radius:7px;background:var(--c);border:1px solid rgba(0,0,0,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}\n#farbe-braun .hex{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;color:#1f2937}\n#farbe-braun .name{font-size:.86rem;color:var(--muted)}\n#farbe-braun .mini-tip{font-size:.9rem;color:#374151;margin-top:4px}\n#farbe-braun .copy-hint{margin-top:2px;font-size:.82rem;color:#6b7280}\n<\/style>\n\n<script>\n(()=&gt;{const r=document.querySelector(\"#farbe-braun\");if(!r||!navigator.clipboard)return;const h=r.querySelector(\".copy-hint\");r.querySelectorAll(\".swatch-item[data-hex]\").forEach(b=&gt;{b.addEventListener(\"click\",async()=&gt;{const x=b.getAttribute(\"data-hex\");try{await navigator.clipboard.writeText(x);if(h){h.textContent=x+\" kopiert\";setTimeout(()=&gt;h.textContent=\"\",1500)}}catch{}})})})();\n<\/script>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3641247 elementor-widget elementor-widget-text-editor\" data-id=\"3641247\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"farbe-weiss\" class=\"bsc-domain\" aria-labelledby=\"farbe-weiss-title\">\n  <div class=\"wrap\">\n    <header class=\"head\">\n      <h2 id=\"farbe-weiss-title\">White in web design: effect, meaning &amp; combinations #FFFFFF<\/h2>\n      <p class=\"lead\">White creates calm, clarity and space. It improves legibility, directs the eye and is the basis for modern, minimalist layouts. <\/p>\n    <\/header>\n\n    <div class=\"color-grid\">\n      <article class=\"card\">\n        <h3>Effect<\/h3>\n        <ul class=\"bullet\">\n          <li>clean, reduced, tidy<\/li>\n          <li>Strengthens typography &amp; image effect<\/li>\n          <li>creates high-quality, timeless aesthetics<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>When to use<\/h3>\n        <ul class=\"bullet\">\n          <li>for whitespace, product focus, readability<\/li>\n          <li>in Portfolios, Agencies, Premium brands<\/li>\n          <li>for text\/data-heavy pages<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Less suitable<\/h3>\n        <ul class=\"bullet\">\n          <li>with &#8220;cozy&#8221;\/cozy brands alone<\/li>\n          <li>Without accents it can appear sterile<\/li>\n          <li>merciless with weak images\/texts<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Typical industries<\/h3>\n        <ul class=\"bullet\">\n          <li>Design, Agencies, Architecture<\/li>\n          <li>Medicine, education, tech<\/li>\n          <li>E-commerce with high-quality photos<\/li>\n        <\/ul>\n      <\/article>\n    <\/div>\n\n    <aside class=\"tip-box\" aria-label=\"Farbkombinationen Tipp\">\n      <div class=\"tip-head\">\n        <span class=\"tip-dot\" aria-hidden=\"true\"><\/span>\n        <strong>Tip:<\/strong> White harmonizes particularly well with:\n      <\/div>\n\n      \n      <div class=\"swatches labeled\">\n        <button class=\"swatch-item\" data-hex=\"#243B6B\">\n          <span class=\"swatch\" style=\"--c:#243B6B\"><\/span>\n          <span class=\"hex\">#243B6B<\/span><span class=\"name\">Dark blue<\/span>\n        <\/button>\n\n        <button class=\"swatch-item\" data-hex=\"#000000\">\n          <span class=\"swatch\" style=\"--c:#000000\"><\/span>\n          <span class=\"hex\">#000000<\/span><span class=\"name\">Black<\/span>\n        <\/button>\n\n        <button class=\"swatch-item\" data-hex=\"#F3F4F6\">\n          <span class=\"swatch\" style=\"--c:#F3F4F6\"><\/span>\n          <span class=\"hex\">#F3F4F6<\/span><span class=\"name\">Light gray<\/span>\n        <\/button>\n\n        <button class=\"swatch-item\" data-hex=\"#17A2B8\">\n          <span class=\"swatch\" style=\"--c:#17A2B8\"><\/span>\n          <span class=\"hex\">#17A2B8<\/span><span class=\"name\">Turquoise<\/span>\n        <\/button>\n      <\/div>\n\n      <p class=\"mini-tip\">White needs contrast: dark blue\/black for depth, light gray\/turquoise for freshness.<\/p>\n      <p class=\"mini-tip\">More shades instead of pure white: <a href=\"https:\/\/bscwebdesign.at\/en\/blog\/5-modern-alternatives-to-pure-white-ffffff-2025\/\" target=\"_blank\" rel=\"noopener\">alternatives to #FFFFFF (2025)<\/a><\/p>\n      <p class=\"copy-hint\" role=\"status\" aria-live=\"polite\"><\/p>\n    <\/aside>\n  <\/div>\n<\/section>\n\n<style>\n  \/* Akzente in hellem Grau \u2013 bleibt wie besprochen *\/\n  #farbe-weiss{\n    --accent:#9CA3AF; --ring:#E5E7EB; --ink:#0F172A; --muted:#4B5563; --card:#FFFFFF;\n    --shadow-sm:0 2px 10px rgba(12,12,13,.06); --shadow-lg:0 14px 34px rgba(12,12,13,.12);\n    font-family:\"Sora\",system-ui,sans-serif;\n  }\n  #farbe-weiss .wrap{max-width:920px;margin:0 auto;padding:24px 16px 16px}\n  #farbe-weiss .head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:800;line-height:1.2;margin:1.2rem 0 .4rem}\n  #farbe-weiss .lead{font-size:1.02rem;color:var(--muted);max-width:60ch}\n\n  #farbe-weiss .color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:1rem}\n  #farbe-weiss .card{border:1px solid var(--ring);border-radius:16px;background:var(--card);padding:16px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}\n  #farbe-weiss .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#D1D5DB}\n  #farbe-weiss .card h3{font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:8px}\n\n  #farbe-weiss .bullet{list-style:none;margin:0;padding:0;display:grid;gap:8px}\n  #farbe-weiss .bullet li{display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink)}\n  #farbe-weiss .bullet li::before{content:\"\";width:12px;height:12px;border:2px solid var(--accent);border-left:0;border-top:0;transform:rotate(45deg);margin-top:4px}\n\n  \/* Tipp-Box *\/\n  #farbe-weiss .tip-box{background:#fff;border:1px solid var(--ring);border-left:4px solid var(--accent);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm);margin:20px 0 8px}\n  #farbe-weiss .tip-head{display:flex;align-items:center;gap:10px;font-size:.95rem;margin-bottom:8px}\n  #farbe-weiss .tip-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(156,163,175,.18)}\n  #farbe-weiss .tip-head strong{color:var(--accent)}\n\n  \/* Saubere Chip-Gestaltung *\/\n  #farbe-weiss .swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin:8px 0 6px}\n  @media (max-width:560px){#farbe-weiss .swatches{grid-template-columns:1fr}}\n  #farbe-weiss .swatch-item{\n    display:inline-flex;align-items:center;gap:10px;\n    background:#fff;border:1px solid #E6EAF2;border-radius:12px;\n    padding:10px 12px;cursor:pointer;\n    transition:transform .16s,box-shadow .16s,border-color .16s;\n  }\n  #farbe-weiss .swatch-item:hover{transform:translateY(-2px);border-color:#D9E0EC;box-shadow:0 10px 22px rgba(12,12,13,.08)}\n  #farbe-weiss .swatch{\n    width:24px;height:24px;border-radius:6px;background:var(--c);\n    border:1px solid rgba(0,0,0,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);\n  }\n  #farbe-weiss .hex{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;color:#1F2937}\n  #farbe-weiss .name{font-size:.85rem;color:#6B7280}\n\n  #farbe-weiss .mini-tip{font-size:.9rem;color:#374151;margin-top:6px}\n  #farbe-weiss .copy-hint{margin-top:2px;font-size:.82rem;color:#6B7280}\n<\/style>\n\n<script>\n(() =&gt; {\n  const root = document.querySelector(\"#farbe-weiss\");\n  if (!root || !navigator.clipboard) return;\n  const hint = root.querySelector(\".copy-hint\");\n  root.querySelectorAll(\".swatch-item[data-hex]\").forEach(btn =&gt; {\n    btn.addEventListener(\"click\", async () =&gt; {\n      const hex = btn.getAttribute(\"data-hex\");\n      try {\n        await navigator.clipboard.writeText(hex);\n        if (hint) {\n          hint.textContent = hex + \" kopiert\";\n          setTimeout(() =&gt; (hint.textContent = \"\"), 1500);\n        }\n      } catch {}\n    });\n  });\n})();\n<\/script>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c07053f elementor-widget elementor-widget-text-editor\" data-id=\"c07053f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"farbe-schwarz\" class=\"bsc-domain\" aria-labelledby=\"farbe-schwarz-title\">\n  <div class=\"wrap\">\n    <header class=\"head\">\n      <h2 id=\"farbe-schwarz-title\">Black in web design: effect, meaning &amp; combinations #000000<\/h2>\n      <p class=\"lead\">Black is elegant, high-contrast and self-confident. It conveys luxury, authority and a strong visual presence. <\/p>\n    <\/header>\n\n    <div class=\"color-grid\">\n      <article class=\"card\">\n        <h3>Effect<\/h3>\n        <ul class=\"bullet\">\n          <li>Noble, powerful brand effect<\/li>\n          <li>maximum contrast &amp; focus<\/li>\n          <li>works excellently with large images<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>When to use<\/h3>\n        <ul class=\"bullet\">\n          <li>for luxury &amp; fashion appearances<\/li>\n          <li>in heroic image\/type layouts<\/li>\n          <li>for clear, reduced brand management<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Less suitable<\/h3>\n        <ul class=\"bullet\">\n          <li>for children\/social projects<\/li>\n          <li>with very friendly, playful brands<\/li>\n          <li>Too flat can appear &#8220;heavy&#8221;<\/li>\n        <\/ul>\n      <\/article>\n\n      <article class=\"card\">\n        <h3>Typical industries<\/h3>\n        <ul class=\"bullet\">\n          <li>Luxury, Fashion, Photography<\/li>\n          <li>Automotive, Architecture<\/li>\n          <li>High-end e-commerce<\/li>\n        <\/ul>\n      <\/article>\n    <\/div>\n\n    <aside class=\"tip-box\" aria-label=\"Farbkombinationen Tipp\">\n      <div class=\"tip-head\">\n        <span class=\"tip-dot\" aria-hidden=\"true\"><\/span>\n        <strong>Tip:<\/strong> Black harmonizes particularly well with:\n      <\/div>\n\n      <div class=\"swatches labeled\">\n        <button class=\"swatch-item\" data-hex=\"#FFFFFF\">\n          <span class=\"swatch\" style=\"--c:#FFFFFF\"><\/span>\n          <span class=\"hex\">#FFFFFF<\/span><span class=\"name\">White<\/span>\n        <\/button>\n\n        <button class=\"swatch-item\" data-hex=\"#808080\">\n          <span class=\"swatch\" style=\"--c:#808080\"><\/span>\n          <span class=\"hex\">#808080<\/span><span class=\"name\">Gray<\/span>\n        <\/button>\n\n        <button class=\"swatch-item\" data-hex=\"#243B6B\">\n          <span class=\"swatch\" style=\"--c:#243B6B\"><\/span>\n          <span class=\"hex\">#243B6B<\/span><span class=\"name\">Blue<\/span>\n        <\/button>\n\n        <button class=\"swatch-item\" data-hex=\"#F28020\">\n          <span class=\"swatch\" style=\"--c:#F28020\"><\/span>\n          <span class=\"hex\">#F28020<\/span><span class=\"name\">Orange<\/span>\n        <\/button>\n      <\/div>\n\n      <p class=\"mini-tip\">Black with white = high contrast; color inserts (blue\/orange) draw the eye.<\/p>\n      <p class=\"mini-tip\">More ideas: <a href=\"https:\/\/bscwebdesign.at\/en\/blog\/5-modern-alternatives-to-black-in-web-design-2025-tips-for-color-combinations\/\" target=\"_blank\" rel=\"noopener\">Alternatives to black in web design (2025)<\/a><\/p>\n      <p class=\"copy-hint\" role=\"status\" aria-live=\"polite\"><\/p>\n    <\/aside>\n  <\/div>\n<\/section>\n\n<style>\n  #farbe-schwarz {\n    --accent:#000000;\n    --ring:#d1d5db;\n    --ink:#0f172a;\n    --muted:#4b5563;\n    --card:#ffffff;\n    --shadow-sm:0 2px 10px rgba(12,12,13,.06);\n    --shadow-lg:0 14px 34px rgba(12,12,13,.12);\n    font-family:\"Sora\",system-ui,sans-serif;\n  }\n\n  #farbe-schwarz .wrap {max-width:920px;margin:0 auto;padding:24px 16px 16px}\n  #farbe-schwarz .head h2 {font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:800;line-height:1.2;margin:1.2rem 0 .4rem}\n  #farbe-schwarz .lead {font-size:1.02rem;color:var(--muted);max-width:60ch}\n\n  #farbe-schwarz .color-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:1rem}\n  #farbe-schwarz .card {\n    border:1px solid var(--ring);\n    border-radius:16px;\n    background:var(--card);\n    padding:16px;\n    box-shadow:var(--shadow-sm);\n    transition:transform .18s,box-shadow .18s,border-color .18s;\n  }\n  #farbe-schwarz .card:hover {\n    transform:translateY(-3px);\n    box-shadow:var(--shadow-lg);\n    border-color:#c7ced6;\n  }\n  #farbe-schwarz .card h3 {font-size:1.05rem;font-weight:700;color:var(--accent);margin-bottom:8px}\n\n  #farbe-schwarz .bullet {list-style:none;margin:0;padding:0;display:grid;gap:8px}\n  #farbe-schwarz .bullet li {display:grid;grid-template-columns:18px 1fr;gap:10px;color:var(--ink)}\n  #farbe-schwarz .bullet li::before {\n    content:\"\";width:12px;height:12px;border:2px solid var(--accent);\n    border-left:0;border-top:0;transform:rotate(45deg);margin-top:4px;\n  }\n\n  \/* Tipp-Box *\/\n  #farbe-schwarz .tip-box {\n    background:#fff;\n    border:1px solid #d1d5db;\n    border-left:4px solid var(--accent);\n    border-radius:14px;\n    padding:14px;\n    box-shadow:var(--shadow-sm);\n    margin:20px 0 8px;\n  }\n  #farbe-schwarz .tip-head {display:flex;align-items:center;gap:10px;font-size:.95rem;margin-bottom:8px}\n  #farbe-schwarz .tip-dot {width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(0,0,0,.18)}\n  #farbe-schwarz .tip-head strong {color:var(--accent)}\n\n  \/* Swatches *\/\n  #farbe-schwarz .swatches {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin:8px 0 6px}\n  @media (max-width:560px){#farbe-schwarz .swatches{grid-template-columns:1fr}}\n  #farbe-schwarz .swatch-item {\n    display:inline-flex;align-items:center;gap:10px;\n    background:#fff;border:1px solid #E6EAF2;border-radius:12px;\n    padding:10px 12px;cursor:pointer;\n    transition:transform .16s,box-shadow .16s,border-color .16s;\n  }\n  #farbe-schwarz .swatch-item:hover {\n    transform:translateY(-2px);\n    border-color:#D9E0EC;\n    box-shadow:0 10px 22px rgba(12,12,13,.08);\n  }\n  #farbe-schwarz .swatch {\n    width:24px;height:24px;border-radius:6px;background:var(--c);\n    border:1px solid rgba(0,0,0,.07);\n    box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);\n  }\n  #farbe-schwarz .hex {font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85rem;color:#1F2937}\n  #farbe-schwarz .name {font-size:.85rem;color:#6B7280}\n\n  #farbe-schwarz .mini-tip {font-size:.9rem;color:#374151;margin-top:6px}\n  #farbe-schwarz .copy-hint {margin-top:2px;font-size:.82rem;color:#6B7280}\n<\/style>\n\n<script>\n(() =&gt; {\n  const root = document.querySelector(\"#farbe-schwarz\");\n  if (!root || !navigator.clipboard) return;\n  const hint = root.querySelector(\".copy-hint\");\n  root.querySelectorAll(\".swatch-item[data-hex]\").forEach(btn =&gt; {\n    btn.addEventListener(\"click\", async () =&gt; {\n      const hex = btn.getAttribute(\"data-hex\");\n      try {\n        await navigator.clipboard.writeText(hex);\n        if (hint) {\n          hint.textContent = hex + \" kopiert\";\n          setTimeout(() =&gt; (hint.textContent = \"\"), 1500);\n        }\n      } catch {}\n    });\n  });\n})();\n<\/script>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb99a69 elementor-widget elementor-widget-text-editor\" data-id=\"cb99a69\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<section id=\"sec-fazit\" class=\"bsc-domain\">\n  <div class=\"wrap\">\n    <h2>Conclusion: Use colors in a targeted manner<\/h2>\n    <p><strong>Colors determine impact and trust<\/strong> &#8211; they direct emotion, focus and brand perception. Those who understand their psychology design websites that are not only beautiful, but also strategically effective. <\/p>\n\n    <div class=\"tip-box\">\n  Read the practical guide:\n    <a href=\"https:\/\/bscwebdesign.at\/blog\/website-erstellen-2025-schritt-fuer-schritt\/\" target=\"_blank\" rel=\"noopener\">Create your own website 2025 &#8211; step by step<\/a>\n    <\/div>\n\n    <p>Whether blue for trust, green for balance or red for energy &#8211; the optimal choice of color always depends on the target group, brand and desired emotion. Consciously test combinations and keep your design consistent across all pages. <\/p>\n  <\/div>\n<\/section>\n\n<section id=\"sec-faq\" class=\"bsc-domain\">\n  <div class=\"wrap\">\n    <h2>FAQ &#8211; Colors in web design<\/h2>\n\n    <details class=\"faq\">\n      <summary>Which color looks most trustworthy on websites?<\/summary>\n      <p>Blue tones are considered to be particularly serious and stable. They create security and are ideal for service, financial or health websites. <\/p>\n    <\/details>\n\n    <details class=\"faq\">\n      <summary>What colors should you use for call-to-action buttons?<\/summary>\n      <p>Warm contrasting colors such as orange or red attract attention and encourage clicks. It is important that they stand out clearly from the rest of the layout. <\/p>\n    <\/details>\n\n    <details class=\"faq\">\n      <summary>How do I combine several colors harmoniously?<\/summary>\n      <p>Use the 60-30-10 rule: 60 % base color, 30 % secondary color, 10 % accent. This keeps the design calm but lively. <\/p>\n    <\/details>\n\n    <details class=\"faq\">\n      <summary>Which colors look modern and timeless?<\/summary>\n      <p>White, gray and beige tones in combination with accents in blue or turquoise look clear, minimalist and professional &#8211; ideal for 2025 design trends.<\/p>\n    <\/details>\n\n    <details class=\"faq\">\n      <summary>What mistakes should I avoid when choosing a color?<\/summary>\n      <p>Too many bold colors without hierarchy are confusing. Avoid strong neon contrasts and pay attention to sufficient text-background contrast for accessibility. <\/p>\n    <\/details>\n\n    <details class=\"faq\">\n      <summary>How do colors influence the conversion rate?<\/summary>\n      <p>Clear color contrasts between button and background increase the click rate. Colors have an emotional effect &#8211; red activates, blue calms, green confirms actions. <\/p>\n    <\/details>\n  <\/div>\n<\/section>\n\n<style>\n\/* Basis *\/\n.bsc-domain{font-family:\"Sora\",system-ui,-apple-system,\"Segoe UI\",Roboto,Arial,sans-serif;font-size:16px;line-height:1.8;color:#0c0c0d}\n.bsc-domain .wrap{max-width:800px;margin:0 auto;padding:0 12px}\n.bsc-domain h2{font-size:26px;font-weight:800;line-height:1.3;margin:2.3rem 0 .8rem}\n.bsc-domain p{margin:.5rem 0 1rem}\n.bsc-domain a{color:#151DA5;text-decoration:underline}\n.bsc-domain a:hover{text-decoration:none}\n\n\/* Tipp-Box *\/\n.tip-box{background:#F7F8FF;border-left:4px solid #151DA5;border-radius:14px;padding:16px 20px;font-size:.97rem;box-shadow:0 3px 10px rgba(12,12,13,.06);margin:22px 0 32px}\n\n\/* FAQ-Stil *\/\n.faq{background:#fff;border:1px solid #eceef3;border-radius:12px;padding:12px 14px;margin:10px 0;box-shadow:0 2px 8px rgba(12,12,13,.04)}\n.faq&gt;summary{cursor:pointer;font-weight:700;list-style:none;position:relative;padding-right:28px}\n.faq&gt;summary::-webkit-details-marker{display:none}\n.faq&gt;summary::after{content:\"\";position:absolute;right:4px;top:50%;transform:translateY(-50%) rotate(0);width:10px;height:10px;border-right:2px solid #151DA5;border-bottom:2px solid #151DA5;transform-origin:60% 60%;transition:transform .18s ease}\n.faq[open]&gt;summary::after{transform:translateY(-50%) rotate(45deg)}\n.faq p{margin-top:.5rem;font-size:.95rem;color:#374151}\n\n\/* Responsive *\/\n@media(max-width:640px){.bsc-domain h2{font-size:24px}}\n<\/style>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c73dc59 e-flex e-con-boxed e-con e-parent\" data-id=\"c73dc59\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-97a9f0e elementor-fixed elementor-widget__width-initial elementor-widget elementor-widget-table-of-contents\" data-id=\"97a9f0e\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;headings_by_tags&quot;:[&quot;h1&quot;],&quot;exclude_headings_by_selector&quot;:[],&quot;no_headings_message&quot;:&quot;Es wurden keine \\u00dcberschriften auf dieser Seite gefunden.&quot;,&quot;_position&quot;:&quot;fixed&quot;,&quot;marker_view&quot;:&quot;bullets&quot;,&quot;icon&quot;:{&quot;value&quot;:&quot;&quot;,&quot;library&quot;:&quot;&quot;},&quot;hierarchical_view&quot;:&quot;yes&quot;,&quot;min_height&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;min_height_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;min_height_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\" data-widget_type=\"table-of-contents.default\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-toc__header\">\n\t\t\t\t\t\t<h4 class=\"elementor-toc__header-title\">\n\t\t\t\tIn this article\t\t\t<\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div id=\"elementor-toc__97a9f0e\" class=\"elementor-toc__body\">\n\t\t\t<div class=\"elementor-toc__spinner-container\">\n\t\t\t\t<svg class=\"elementor-toc__spinner eicon-animation-spin e-font-icon-svg e-eicon-loading\" aria-hidden=\"true\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M500 975V858C696 858 858 696 858 500S696 142 500 142 142 304 142 500H25C25 237 238 25 500 25S975 237 975 500 763 975 500 975Z\"><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fc5468e e-con-full e-flex e-con e-child\" data-id=\"fc5468e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-368d19a e-con-full e-flex e-con e-child\" data-id=\"368d19a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68ece34 elementor-widget elementor-widget-image\" data-id=\"68ece34\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"800\" height=\"800\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-1024x1024.webp\" class=\"attachment-large size-large wp-image-3952\" alt=\"Portr\u00e4t von Tobias Berger, junger Mann mit lockigen Haaren und blauem BSC-Pulli, l\u00e4chelnd in die Kamera blickend.\" srcset=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-1024x1024.webp 1024w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp 300w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-150x150.webp 150w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-768x768.webp 768w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-1536x1536.webp 1536w, https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-2048x2048.webp 2048w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-be1cb1c e-con-full e-flex e-con e-child\" data-id=\"be1cb1c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f50d484 elementor-widget elementor-widget-heading\" data-id=\"f50d484\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Hey, I'm Tobias!<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4d42ac0 elementor-widget elementor-widget-text-editor\" data-id=\"4d42ac0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<div data-breakout=\"normal\">\n<p id=\"viewer-e9b6k624\" class=\"pQuHl TfvTg z3yvg logrL\" dir=\"auto\">Thanks for taking the time to read this post &#8211; really cool that you&#8217;re interested in website &amp; web design!&nbsp;<br data-start=\"486\" data-end=\"489\">You can find many more tips on design, technology and SEO on our blog. And if you have any questions or need support with your own website, we at BSC Webdesign are always happy to help. <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6802b3a elementor-align-center elementor-widget elementor-widget-button\" data-id=\"6802b3a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm elementor-animation-grow\" href=\"https:\/\/bscwebdesign.at\/en\/\" target=\"_blank\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">See for yourself now<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a3ae650 elementor-widget elementor-widget-image\" data-id=\"a3ae650\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/11\/Beispiel_Fuer_Onepager.mp4\" title=\"\" alt=\"\" loading=\"lazy\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>How colors affect websites. Psychology, mood and clear examples of the right choice of colors in web design. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41],"tags":[],"class_list":["post-9961","post","type-post","status-publish","format-standard","hentry","category-website-en"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Website colors 2025: Effect and psychology - bscwebdesign.at<\/title>\n<meta name=\"description\" content=\"Discover how colors work in web design: Blue creates trust, green balance, red energy. The best website colors 2025 with effect &amp; combinations.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website colors 2025: Effect and psychology - bscwebdesign.at\" \/>\n<meta property=\"og:description\" content=\"Discover how colors work in web design: Blue creates trust, green balance, red energy. The best website colors 2025 with effect &amp; combinations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/\" \/>\n<meta property=\"og:site_name\" content=\"bscwebdesign.at\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-14T10:30:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-02T08:25:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp\" \/>\n<meta name=\"author\" content=\"office@bscwebdesign.com\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"office@bscwebdesign.com\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/website-colors-2025-effect-and-psychology-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/website-colors-2025-effect-and-psychology-2\\\/\"},\"author\":{\"name\":\"office@bscwebdesign.com\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#\\\/schema\\\/person\\\/f791b2d19aa0477a1a182c09cca40514\"},\"headline\":\"Website colors 2025: Effect and psychology\",\"datePublished\":\"2025-10-14T10:30:19+00:00\",\"dateModified\":\"2025-12-02T08:25:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/website-colors-2025-effect-and-psychology-2\\\/\"},\"wordCount\":1962,\"publisher\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/website-colors-2025-effect-and-psychology-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Tobias-300x300.webp\",\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/website-colors-2025-effect-and-psychology-2\\\/\",\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/website-colors-2025-effect-and-psychology-2\\\/\",\"name\":\"Website colors 2025: Effect and psychology - bscwebdesign.at\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/website-colors-2025-effect-and-psychology-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/website-colors-2025-effect-and-psychology-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Tobias-300x300.webp\",\"datePublished\":\"2025-10-14T10:30:19+00:00\",\"dateModified\":\"2025-12-02T08:25:38+00:00\",\"description\":\"Discover how colors work in web design: Blue creates trust, green balance, red energy. The best website colors 2025 with effect & combinations.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/website-colors-2025-effect-and-psychology-2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/website-colors-2025-effect-and-psychology-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/website-colors-2025-effect-and-psychology-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Tobias-300x300.webp\",\"contentUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Tobias-300x300.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/website-colors-2025-effect-and-psychology-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website colors 2025: Effect and psychology\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#website\",\"url\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/\",\"name\":\"bscwebdesign.at\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#organization\",\"name\":\"bscwebdesign.at\",\"url\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/bsc-logo-next.webp\",\"contentUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/bsc-logo-next.webp\",\"width\":2500,\"height\":1000,\"caption\":\"bscwebdesign.at\"},\"image\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#\\\/schema\\\/person\\\/f791b2d19aa0477a1a182c09cca40514\",\"name\":\"office@bscwebdesign.com\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2e20e08ef43e4350ac5d6c2778485f497dbb48e503340112c1f1fb68f4c44d89?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2e20e08ef43e4350ac5d6c2778485f497dbb48e503340112c1f1fb68f4c44d89?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2e20e08ef43e4350ac5d6c2778485f497dbb48e503340112c1f1fb68f4c44d89?s=96&d=mm&r=g\",\"caption\":\"office@bscwebdesign.com\"},\"sameAs\":[\"https:\\\/\\\/bscwebdesign.at\"],\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/author\\\/officebscwebdesign-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Website colors 2025: Effect and psychology - bscwebdesign.at","description":"Discover how colors work in web design: Blue creates trust, green balance, red energy. The best website colors 2025 with effect & combinations.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/","og_locale":"en_US","og_type":"article","og_title":"Website colors 2025: Effect and psychology - bscwebdesign.at","og_description":"Discover how colors work in web design: Blue creates trust, green balance, red energy. The best website colors 2025 with effect & combinations.","og_url":"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/","og_site_name":"bscwebdesign.at","article_published_time":"2025-10-14T10:30:19+00:00","article_modified_time":"2025-12-02T08:25:38+00:00","og_image":[{"url":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp","type":"","width":"","height":""}],"author":"office@bscwebdesign.com","twitter_card":"summary_large_image","twitter_misc":{"Written by":"office@bscwebdesign.com","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/#article","isPartOf":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/"},"author":{"name":"office@bscwebdesign.com","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#\/schema\/person\/f791b2d19aa0477a1a182c09cca40514"},"headline":"Website colors 2025: Effect and psychology","datePublished":"2025-10-14T10:30:19+00:00","dateModified":"2025-12-02T08:25:38+00:00","mainEntityOfPage":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/"},"wordCount":1962,"publisher":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#organization"},"image":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/#primaryimage"},"thumbnailUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp","articleSection":["Website"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/","url":"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/","name":"Website colors 2025: Effect and psychology - bscwebdesign.at","isPartOf":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/#primaryimage"},"image":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/#primaryimage"},"thumbnailUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp","datePublished":"2025-10-14T10:30:19+00:00","dateModified":"2025-12-02T08:25:38+00:00","description":"Discover how colors work in web design: Blue creates trust, green balance, red energy. The best website colors 2025 with effect & combinations.","breadcrumb":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/#primaryimage","url":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp","contentUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Tobias-300x300.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/bscwebdesign.at\/en\/blog\/website-colors-2025-effect-and-psychology-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bscwebdesign.at\/en\/home\/"},{"@type":"ListItem","position":2,"name":"Website colors 2025: Effect and psychology"}]},{"@type":"WebSite","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#website","url":"https:\/\/plum-ibex-319890.hostingersite.com\/","name":"bscwebdesign.at","description":"","publisher":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plum-ibex-319890.hostingersite.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#organization","name":"bscwebdesign.at","url":"https:\/\/plum-ibex-319890.hostingersite.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#\/schema\/logo\/image\/","url":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/07\/bsc-logo-next.webp","contentUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/07\/bsc-logo-next.webp","width":2500,"height":1000,"caption":"bscwebdesign.at"},"image":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#\/schema\/person\/f791b2d19aa0477a1a182c09cca40514","name":"office@bscwebdesign.com","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2e20e08ef43e4350ac5d6c2778485f497dbb48e503340112c1f1fb68f4c44d89?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2e20e08ef43e4350ac5d6c2778485f497dbb48e503340112c1f1fb68f4c44d89?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2e20e08ef43e4350ac5d6c2778485f497dbb48e503340112c1f1fb68f4c44d89?s=96&d=mm&r=g","caption":"office@bscwebdesign.com"},"sameAs":["https:\/\/bscwebdesign.at"],"url":"https:\/\/bscwebdesign.at\/en\/blog\/author\/officebscwebdesign-com\/"}]}},"_links":{"self":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/posts\/9961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/comments?post=9961"}],"version-history":[{"count":3,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/posts\/9961\/revisions"}],"predecessor-version":[{"id":9966,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/posts\/9961\/revisions\/9966"}],"wp:attachment":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/media?parent=9961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/categories?post=9961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/tags?post=9961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}