-- Primeiro criei os botões

 <div class="botoes">
  <button id="open">Aparecer</button>
  <button id="close">Sumir</button>
</div>

-- Estilizei com CSS

  .botoes{
    display: flex;
    gap: 2em;
  }

-- No main.js criei a variável list que irá armazenar a lista ul

const list = document.querySelector(".lista");

-- Dentro do arquivo css estilizei os data attributes com a propriedade display

  [data-lista="show"] {
    display: block;
}

    [data-lista="hide"] {
    display: none;
}

-- No main,js utilizei o método event listener e digo nele o que deve ser feito no clique, no caso mostrar e esconder a lista de tintas..

document.querySelector("#open").addEventListener("click", () =>{
    list.setAttribute("data-lista", "show");
})

document.querySelector("#close").addEventListener("click", () =>{
    list.setAttribute("data-lista", "hide")
})